h1{
    position: absolute;
    width: 0;
    height: 0;
    visibility: hidden;
}

h2{
    font-size: var(--font-size-h1);
    color: var(--secoundary-forecolor-mode);
}

.subheading{
    text-align: center;
    font-size: var(--font-size-h2);
    margin-bottom: 2.5rem;
}

.flex-container-about{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.heading-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 5rem 0;
    width: 100%;
    gap: 1rem;
}

.about-container, .us-container{
    width: 30rem;
    height: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.us-container{
    border-left: var(--border-preview-container);
    border-bottom: var(--border-preview-container);
    border-radius: var(--border-radius);
}

.about-container{
    border-right: var(--border-preview-container);
    border-bottom: var(--border-preview-container);
    border-radius: var(--border-radius);
}

.about-dot-heading{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1000px;
    height: 15rem;
    width: 15rem;
}

body.light .about-dot-heading{
    background-color: var(--primary-color-blur-fallback);
    background-color: var(--primary-color-blur);
}

body.dark .about-dot-heading{
    background-color: transparent;
    border: var(--border-primary-fallback);
    border: var(--border-primary);
}
.city-img, .jan-img, .fh-img{
    width: 25vw;
    height: auto;
    max-width: 25rem;
    min-width: 9rem;
    border-radius: var(--border-radius);
    border: var(--border);
    box-shadow: var(--border-shadow-fallback);
    box-shadow: var(--border-shadow);
}

.flex-container-about p{
    font-size: 1.5rem;
    color: var(--secoundary-forecolor-mode);
    text-align: center;
    padding: 0 5rem;
    line-height: 1.5;
}

.city-fh-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 4rem;
    width: 100%;
}

.flex-container-about{
    margin: 0 var(--margin-medium);
}

.about-grid{
    display: grid;
    column-gap: 1.5rem;
    row-gap: 2.5rem;
    grid-template-columns: [dots] auto [descriptions] 1fr;
    grid-template-rows: repeat(3, auto);
}

.flex-container-about .about-grid p{
    grid-column: descriptions;
    font-size: 1.5rem;
    color: var(--secoundary-forecolor-mode);
    line-height: 1.5;
    text-align: left;
    padding: 0;
}

img.about-info-dot{
    width: 4rem;
    height: auto;
    grid-column: dots;
}

.description-flex{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flex-container-about a{
    text-decoration-color: var(--primary-color-fallback);
    text-decoration-color: var(--primary-color);
    font-size: 1.5rem;
    color: var(--secoundary-forecolor-mode);
    text-align: center;
    line-height: 1.5;
}

/* Hover Events */

.jan-img:hover, .city-img:hover, .fh-img:hover{
    box-shadow: var(--border-shadow-fore);
    transition: var(--transition-border-shadow);
}

.flex-container-about a:hover{
    text-decoration-color: var(--secoundary-forecolor-mode);
}

/* Media Queries */

@media screen and (max-width: 1200px){
    h2{
        font-size: 2rem;
    }

    .about-dot-heading{
        height: 12rem;
        width: 12rem;
    }

    .about-container, .us-container{
        width: 25rem;
        height: 15rem;
    }

    .flex-container-about p{
        font-size: 1.5rem;
        padding: 0 1rem;
    }

    .flex-container-about .about-grid p{
        padding: 0;
    }
}

@media screen and (max-width: 767px){
    .about-dot-heading{
        height: 8rem;
        width: 8rem;
    }

    .city-fh-container{
        gap: 1.5rem;
    }

    h2, .subheading{
        font-size: 1.5rem;
    }

    .about-container, .us-container{
        width: 15rem;
        height: 10rem;
    }

    .flex-container-about p{
        padding: 0 1rem;
    }
    
    .flex-container-about{
        font-size: 1rem;
        line-height: 1.2;
    }

    .flex-container-about p, .flex-container-about a, .flex-container-about .about-grid p{
        font-size: 1rem;
        line-height: 1.2;
    }

    img.about-info-dot{
        width: 2.5rem;
    }    
}