@use "../mixins" as *;
@use "../media" as *;


.about-us {
    margin-top: 95px;

    &__inner {
        padding-top: calc(var(--section-padding-y) * 2);
        padding-bottom: var(--section-padding-y);
        display: flex;
        flex-direction: column;
        row-gap: 2.5em;

        @include desktop-wide {
            padding-top: var(--section-padding-y);
        }

        @include tablet {
            padding-bottom: calc(var(--section-padding-y) / 2);
        }
    }

    &__header {
        word-break: break-word;
        max-width: 900px;

        @include tablet {
            padding-left: 1em;
        }

        @include mobile-s {
            padding-inline: 0;
        }
    }

    &__title {
        line-height: 95%;
        margin-bottom: 50px;

        @include mobile {
            margin-bottom: 30px;
        }
    }

    &__subtitle {
        @include fluid-text(24, 22);

        font-weight: bold;
        margin-bottom: 0.5em;
    }

    & .idea {
        display: flex;
        justify-content: space-between;
        padding: 50px;
        background-color: var(--color-light-accent);
        border-radius: var(--border-radius-20);
        column-gap: 50px;

        &__content {
            max-width: 630px;

            @include desktop-wide {
                flex-basis: 80%;
            }

            @include tablet {
                flex-basis: 100%;
                max-width: 100%;
            }
        }

        &__title {
            line-height: 95%;
            margin-bottom: 3rem;

            @include desktop {
                margin-bottom: 1.5rem;
            }
        }

        &__subtitle {
            margin-bottom: 1rem;
        }

        & .metrics {
            margin-top: 2rem;

            &__blocks {
                display: flex;
                justify-content: space-between;
                margin-top: 1em;
                column-gap: 2em;

                @include tablet {
                    justify-content: flex-start;
                    column-gap: 4em;
                }

                @include mobile-s {
                    flex-direction: column;
                    row-gap: 2em;
                    margin-top: 1.5em;
                }
            }

            &__block {
                max-width: 270px;

                &-title {
                    @include fluid-text(50, 38);

                    margin-bottom: 0.25em;
                    font-weight: 700;
                    position: relative;

                    &::after {
                        content: "";
                        position: absolute;
                        top: 90%;
                        left: 3%;
                        right: 25%;
                        height: 8px;
                        background-color: var(--color-accent);
                        border-radius: var(--border-radius-15);

                        @include desktop {
                            right: 0%;
                        }

                        @include tablet {
                            right: 15%;
                        }
                    }
                }
            }
        }

        &__props {
            max-width: 770px;

            &-title {
                margin-bottom: 1em;
            }

            &-cards {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;

                @include mobile {
                    grid-template-columns: repeat(1, 1fr);
                }
            }

            & .prop-card {
                background-color: var(--color-light);
                padding: 30px;
                display: flex;
                flex-direction: column;
                row-gap: 1em;
                border-radius: var(--border-radius-30);
                border: 1px solid var(--color-light-accent-2);
                box-shadow: 0 4px 40px 0 var(--color-box-shadow);
                min-width: 240px;
                transition: background-color var(--transition-duration-03), border var(--transition-duration-03);

                &:last-child {
                    grid-column: span 2;

                    @include mobile {
                        grid-column: span 1;
                    }
                }

                &__image {
                    @include square(50px);

                    min-width: 50px;
                }

                &__title {
                    @include fluid-text(22, 18);

                    font-weight: 700;

                    @include tablet {
                        font-size: 22px;
                    }
                }
            }

            @include tablet {
                margin-top: 4em;
                max-width: 100%;
            }
        }

        @include desktop {
            padding-inline: 30px;
            column-gap: 30px;
        }

        @include tablet {
            padding-block: 40px;
            flex-direction: column;
        }

        @include mobile-s {
            margin-inline: calc(-1 * var(--container-padding-x));
            padding-inline: 15px;
        }
    }
}