@import "styles/_mixins.scss";

.about {
    &-hero {
        h1 {
            text-align: center;
            margin: 50px auto 64px;
        }
        &__image {
            object-fit: cover;
            min-height: 244px;
            border-radius: 12px;
        }
    }
    &-vision {
        max-width: 868px;
        margin: 120px auto 0;
        padding-bottom: 120px;
        &-items {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;

            &:nth-child(odd) .about-vision-item__content {
                &::after {
                    content: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M18.9723 36C18.7427 32.0997 17.0917 28.4054 14.3137 25.6274L12.3726 23.6863C9.37201 20.6857 5.30237 19 1.0589 19H0V0H19V1.05884C19 5.30231 20.6857 9.37195 23.6863 12.3725L25.6274 14.3137C28.4054 17.0917 32.0998 18.7426 36 18.9723V36H18.9723Z' fill='%23766BE4'/%3E%3C/svg%3E%0A");
                    position: absolute;
                    bottom: -21px;
                    right: -17px;
                    height: 40px;
                    z-index: -1;
                }
            }
            &:nth-child(even) {
                flex-direction: row-reverse;
            }
        }
        &-item {
            position: relative;
            flex: 1 1 50%;
            border-radius: 12px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            &__image {
                padding: 40px;
                img {
                    aspect-ratio: 354/354;
                    border-radius: 8px;
                }
            }
            &__content {
                padding: 24px;
                background: var(--Purple-gradient);
                color: var(--White);
                .body1 {
                    opacity: 0.6;
                    margin-bottom: 16px;
                }

                &-dot {
                    height: 6px;
                    width: 6px;
                    background-color: var(--White);
                    opacity: 0.3;
                    border-radius: 50%;
                    position: absolute;
                    &.top-left {
                        top: 16px;
                        left: 16px;
                    }
                    &.top-right {
                        top: 16px;
                        right: 16px;
                    }
                    &.bottom-left {
                        bottom: 16px;
                        left: 16px;
                    }
                    &.bottom-right {
                        bottom: 16px;
                        right: 16px;
                    }
                }
            }
        }
    }
    &-team {
        padding: 64px 40px 80px;
        background-color: var(--Light-Grey);
        border-radius: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        h2 {
            margin: 24px auto;
        }
        .body1 {
            opacity: 0.6;
            max-width: 600px;
            text-align: center;
            margin-bottom: 63px;
        }

        &-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
        }
        &-mob-container {
            margin-top: 12px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 1.5s ease;
            &.open {
                max-height: 1500px;
                height: auto;
            }
        }
        &-item {
            border-radius: 12px;
            border: 1px solid var(--Grey);
            background-color: var(--White);
            padding: 8px 32px 8px 8px;
            display: flex;
            align-items: center;
            gap: 20px;
            &__image {
                border-radius: 6px;
                background: var(--Grey);
                max-width: 80px;
                max-height: 80px;
                overflow: hidden;
            }
            &__body {
                .body1 {
                    opacity: 1;
                    text-align: start;
                    margin-bottom: 10px;
                }
                .link {
                    opacity: 0.6;
                }
            }
        }
        .hide-button {
            margin-top: 32px;
        }
    }

    @include w($lg) {
        &-team {
            border-radius: 0;
            padding: 64px 14px 80px;
        }
    }
    @include w($md) {
        &-vision {
            margin: 64px auto 0;
            padding-bottom: 64px;
            flex-direction: column;
            gap: 16px;
            &-item {
                &__content {
                    min-height: 358px;
                }
            }
        }

        &-team {
            &-container {
                gap: 12px;
            }
            border-radius: 0;
            padding: 64px 14px 80px;
            &-item {
                flex: 1 1 calc(50% - 20px);
            }
        }
    }
    @include w($sm) {
        &-hero {
            h1 {
                margin: 32px auto;
            }
        }
        &-vision {
            margin: 64px auto 0;
            padding-bottom: 64px;
            gap: 16px;
            &-item {
                &__image {
                    padding: 0;
                }
            }
            &-items {
                flex-direction: column;
                flex-wrap: nowrap;
                gap: 16px;
                &:nth-child(odd) .about-vision-item__content {
                    &::after {
                        content: "";
                    }
                }
                &:nth-child(even) {
                    flex-direction: column;
                }
            }
            &-items + &-items {
                margin-top: 16px;
            }
        }

        &-team {
            .body1 {
                margin-bottom: 32px;
            }
            h2 {
                margin: 16px auto;
            }
            &-item {
                flex: 1 1 100%;
                gap: 12px;
                &__image {
                    max-width: 48px;
                    max-height: 48px;
                }
                &__body {
                    .body1 {
                        margin-bottom: 8px;
                    }
                }
            }
        }
    }
}

• [D] AboutHero
• [D] AboutTeam
• [D] Career
• [D] OurVision
• [F] index.jsx
  Delete
• [F] styles.scss
  Delete