.about {
    color: rgb(var(--color-gray-1));
    padding: var(--space-sections-s) 0;
    text-align: center;
    scroll-margin-top: 140px;

    .about-container {
        margin-top: -120px;
        display: grid;
        grid-template-columns: 0.3fr 0.4fr 0.3fr;
        grid-template-rows: 0.8fr repeat(2, 0.1fr);
        grid-column-gap: var(--space-8);
        grid-row-gap: var(--space-10);
        min-width: var(--max-width);

        .about-img {
            object-fit: cover;
            object-position: center;
            box-shadow: 0 0 20px #0000004d;
            border-radius: var(--border-radius-sm);
        }

        > img {
            width: 100%;
            height: 100%;
            animation: fade-in 1s forwards;
            
            &:is(:nth-child(1), :nth-child(3)) {
                transform: scale(1.1);
                z-index: 1;
            }

            &:nth-child(1) {
                object-position: right;
            }

            &:nth-child(2) {
                animation-delay: 0.1s;
                transform: scale(1.2);
                z-index: 2;
            }

            &:nth-child(3) {
                object-position: left;
            }
        }

        > .about-card {
            margin-top: var(--space-10);

            > img {
                display: none;
            }

            > h2 {
                font-weight: var(--font-weight-bold);
            }

            > p {
                opacity: var(--opacity-700);
            }
        }

        > a {
            width: 100%;
            text-transform: uppercase;
            color: rgb(var(--color-white));
            background-color: rgb(var(--color-primary));
            font-size: var(--font-size-s);
            font-family: var(--font-main), sans-serif;
            font-weight: var(--font-weight-bold);
            line-height: var(--line-height-m);
            border-radius: var(--border-radius-sm);
            grid-column: 2 / 3;
        }
    }
}

@media (max-width: 820px) {
    .about {
        height: auto;

        .about-container {
            position: relative;
            top: unset;
            left: unset;
            transform: unset;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 var(--space-8);

            .about-card {
                margin: 0;

                > img {
                    display: initial;
                    width: 80%;
                    max-height: 180px;
                    margin-bottom: var(--space-4);
                }
            }

            > img {
                display: none;
            }
        }
    }
}