.bold {
    font-weight: 500;
}

body {
    font-family: "Roboto", "Noto Sans", sans-serif;
    color: var(--color-grey-1);

    gap: 3rem;
}

main {
    padding-block: 10px 40px;
}

#about-banner {
    padding: 2rem 1rem;

    display: grid;
    gap: 1.5rem;
    justify-items: center;

    >h2 {
        grid-row: 1;
        font-size: 1.5rem;
    }

    >img {
        grid-row: 2;
        width: 75%;
    }

    >div {
        grid-row: 3;
        font-size: 1.25rem;
    }
}

@media screen and (min-width: 768px) {
    #about-banner {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        row-gap: 20px;
        column-gap: 2rem;

        padding-block: 2rem;
        padding-inline: 0;

        width: 100%;
        max-width: 960px;

        >h2 {
            grid-row: 1;
            font-size: 1.75rem;
            align-self: self-start;
            justify-self: start;
        }

        >div {
            grid-row: 2;

            display: flex;
            flex-direction: column;
            gap: 1rem;
            align-self: self-start;
        }

        >img {
            grid-column: 2;
            grid-row: 1 / span 2;
            max-width: 300px;
            justify-self: center;
            width: 100%;
        }
    }
}

#about {
    display: grid;
    justify-items: center;
    gap: 3rem;

    svg {
        flex-shrink: 0;
        max-width: 200px;
    }

    h2 {
        text-align: center;
    }

    >div {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    >header {
        max-width: 960px;
        margin-inline: auto;
        display: none;
    }

    section {
        font-size: 1rem;

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: 2rem;

        >h3 {
            grid-row: 1;
            font-size: 1.75rem;
        }

        >img {
            grid-row: 2;
            width: 90%;
            justify-self: center;
        }

        >ul {
            grid-row: 3;
        }
    }

    h3 {
        text-align: center;
    }

    ul {
        list-style: disc;
        padding-block: .5rem;
        padding-inline-start: 1.5rem;

        display: flex;
        flex-direction: column;
        gap: .75rem;
    }

    .trainers {
        max-width: 968px;
        width: 100%;

        >div {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;

            width: 100%;
        }

        article {
            width: 100%;
        }

        article>div {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        article .photo {
            height: 250px;
            max-width: 300px;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center;
            }
        }

        article .location {
            text-align: center;
        }

        article .side--b,
        .side--a {
            display: flex;
            flex-direction: column;
            gap: 1rem;

            padding: 1rem;
        }

        dl {
            display: grid;
            grid-template-columns: 24px 1fr;
            align-items: center;
            column-gap: 1rem;
            row-gap: .25rem;
            align-self: center;
        }

        dt {
            display: flex;
            flex-direction: column;
        }

        .icon {
            width: 24px;
            height: 24px;
        }
    }

    .description {
        max-width: 968px;
        margin-inline: auto;
    }
}

@media screen and (min-width: 768px) {
    #about .trainers>div {
        gap: 3rem;
        grid-template-columns: repeat(2, 1fr);
    }
}

* {
    transition: transform 0.3s;
}

.card--container {
    perspective: 1000px;
    height: 450px;
    width: 100%;
}

.card--container.flip .card--flipper {
    transform: rotateY(180deg);
}

.card--container:hover .side--b,
.card--container:hover .side--a {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.card--flipper {
    position: relative;
    transform-style: preserve-3d;
    height: 100%;
    width: 100%;
    transition: transform 0.6s;
}

.side--b,
.side--a {
    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 450px;
    width: 100%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);

    >p {
        overflow: hidden;
    }
}

.side--a {
    z-index: 2;
    transform: rotateY(0deg);
}

.side--b {
    transform: rotateY(180deg);
}

@media screen and (min-width: 768px) {
    .card--container {
        width: 450px;
    }

    .card--container:hover {
        transform: scale(1.1);
    }

    .side--a {
        width: 450px;
    }
}