.about-values {
    background-color: #EFEFEF;
    color: #4A4A4A;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    padding: 1.2rem 5rem;
    text-align: center;
    font-size: 1.2rem;

    & p {
        max-width: 1000px;
        margin: 2.3rem auto;
    }
}

.about-cards-container {
    color: #4A4A4A;
    width: 100vw;

    .about-cards {
        --min-card-width: 350px;
        --card-spacing: 15px;

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--min-card-width), 1fr));
        max-width: calc((var(--min-card-width) + var(--card-spacing)) * 3 + 0px);
        margin: var(--card-spacing) auto;
        gap: var(--card-spacing);

        & > div {
            padding: .5rem;
            box-shadow: 0 9px 1em #0000001a;
            border-radius: 8px;

            h2 {
                font-size: 1.2rem;
                margin: 0.6rem 0 0 0;
                text-transform: uppercase;
                border-bottom: 1px solid #ccc;
                padding-bottom: 0.8rem;
            }

            p {
                margin: 1rem 0;
                line-height: 1.4;
            }

            span {
                color: var(--algebra-red);
            }
        }
    }
}

.logo-grid {
    display: grid;
    margin: 0 auto;
    width: 80vw;
    overflow-x: auto;

    grid-template-rows: repeat(4, auto);
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;

    h3 {
        margin: 0;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
        text-transform: uppercase;
        font-size: 0.9rem;
    }

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

.location-container {
    background: url("/img/kakoDoNas.jpg") no-repeat fixed center;
    background-size: cover;
}

.location-grid {
    display: grid;
    margin: 1rem auto;
    width: 80vw;

    grid-template-columns: 1fr;
    gap: 15px;

    @media (min-width: 600px) {
        grid-template-columns: repeat(2, 1fr);
    }

    .location-grid-col {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        background-color: #ffffffc2;
        border-radius: 10px;
        box-shadow: 0 9px 1em #0000001a;
        color: #4d4d4d;

        padding: 0.8rem 1.5rem;

        h3 {
            color: var(--algebra-orange);

            iconify-icon {
                width: 20px;
                vertical-align: -2px;
            }
        }

        p {
            margin-left: 10px;
            line-height: 1.2rem;
        }
    }
}

.location-container iframe {
    margin: 0 auto 1rem;
    width: 80vw;
    height: 450px;
    display: block;
    box-shadow: 0 9px 1em #0000001a;
}