/* ************************************ */
/* INTRODUCTION */
/* ************************************ */

.introduction {
    margin-top: 12.8rem;
    margin-bottom: 12.8rem;
}

.heading-tertiary:nth-of-type(1) {
    grid-column: 1 / 4;
    grid-row: 1;
}

.introduction-grid {
    display: grid;
    grid-template-columns: 3fr 3fr 2fr;
    grid-template-rows: 1fr auto 3fr auto auto;
}

.introduction-text-box {
    text-align: justify;
    font-size: 2rem;
    line-height: 1.6;
    margin-bottom: 1.2rem;
}

.introduction-text-box.first-paragraph {
    grid-row: 2;
    grid-column: 1 / 4;
}

.introduction-text-box.second-paragraph {
    grid-row: 3;
    grid-column: 1 / 3;
}

.introduction-img-box {
    grid-row: 3;
    grid-column: 3 / 4;
}

.introduction-img {
    transform: translate(0%, 50%) scale(1.8);
}

.apartment-price {
    display: flex;
    margin-top: 4.8rem;
    font-size: 3.6rem;
    line-height: 1.6;

    grid-column: 1 / 3;
}

.apartment-price p {
    margin-right: 2.4rem;
}

.apartment-price-subtext {
    padding-left: 3.6rem;

    font-size: 1.6rem;
    line-height: 1.6;

    grid-column: 1 / 3;
}

/* MEDIA-QUERIES 1300px   */
@media (max-width: 81.25rem) {

    .introduction-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .apartment-price {
        font-size: 2.4rem;
        margin-top: 4.8rem;
    }

    .apartment-price p {
        margin-right: 2rem;
    }

    .introduction-img {
        transform: translate(-10%, 40%) scale(1.5);
    }
}

/* MEDIA-QUERIES 1100px    */
@media (max-width: 68.75rem ) {

    .introduction {
        margin-bottom: 8.0rem;
    }

    .introduction-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto;
    }

    .heading-tertiary:nth-of-type(1) {
        grid-column: auto;
    }

    .introduction-text-box {

    }

    .introduction-text-box.first-paragraph, .introduction-text-box.second-paragraph {
        grid-row: auto;
        grid-column: auto;
    }

    .apartment-price, .apartment-price-subtext {
        grid-column: auto;
    }

    .apartment-price {
        margin-top: 0.4rem;
    }

    .introduction-img-box {
        grid-row: -1;
        grid-column: auto;
    }

    .introduction-img {
        margin-top: 2.4rem;
        transform: translate(0%, 0%) scale(1.0);
        height: 65vh;
        width: auto;
        justify-self: center;
    }
}

/* MEDIA-QUERIES 940px  */
@media (max-width: 58.75rem) {

}

/* MEDIA-QUERIES 770px  */
@media (max-width: 48.125rem) {

    .introduction-text-box {
        font-size: 1.8rem;
    }

    .apartment-price p {
        font-size: 2rem;
    }

    .apartment-price-subtext {
        font-size: 1.4rem;
    }

    .introduction-img {
        height: auto;
        width: 80vw;
    }
}

/* MEDIA-QUERIES 600px   */
@media (max-width: 37.5rem) {

    .introduction-text-box {
        font-size: 1.6rem;
        line-height: 1.5;
    }

    .apartment-price {
        flex-direction: column;
    }

    .apartment-price p {
        font-size: 1.8rem;
    }

    .apartment-price-subtext {
        font-size: 1.2rem;
        padding-left: 0;
    }
}

/* MEDIA-QUERIES 360px    */
@media (max-width: 22.5rem ) {

}

/* ************************************ */
/* APARTMENT SECTION */
/* ************************************ */

.apartment {
    margin-bottom: 9.6rem;
    padding: 4.8rem 0;
}

.south {
    background-color: #fbf5de;
}

.north {
}

.apartment-grid-south {
    display: grid;

    align-items: center;

    grid-template-columns: 60fr 40fr;
    grid-template-rows: 2fr 1fr;
}

.apartment-grid-north {
    display: grid;

    align-items: center;

    grid-template-columns: 40fr 60fr;
    grid-template-rows: 1fr 1fr;
}

.apartment-text-box {
}

.apartment-text-box h2 {
    margin-bottom: 4.8rem;
}

.heading-left {
    transform: translate(-10%, 0%);
}

.heading-right {
    transform: translate(10%, 0%);
}

.apartment-list {
    list-style-type: disc;
    padding-left: 9.6rem; /* oder mehr für Einrückung */
    padding-right: 9.6rem; /* oder mehr für Einrückung */
}

.apartment-list-element {
    padding-bottom: 1.2rem;
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: justify;
}

/* MEDIA-QUERIES 940px  */
@media (max-width: 58.75rem) {

    .apartment-grid-south {
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 50fr 50fr;
    }

    .apartment-grid-north {
        grid-template-columns: 50fr 50fr;
    }

    .apartment-text-box .heading-tertiary {
        justify-self: center;
    }

    .apartment-list {
        justify-self: center;
    }
}

/* MEDIA-QUERIES 770px  */
@media (max-width: 48.125rem) {

    .apartment {
        margin-bottom: 0;
    }

    .apartment-grid-south, .apartment-grid-north {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .apartment-grid-north .apartment-text-box {
        grid-row: 1;
    }

    .apartment-text-box {
        justify-self: center;
        margin-bottom: 1.2rem;
    }

    .apartment-list-element {
        padding-bottom: 0.8rem;
    }
}

/* MEDIA-QUERIES 600px   */
@media (max-width: 37.5rem) {
    .apartment-list {
        padding-left: 2.4rem;
        padding-right: 2.4rem;
    }
}

/* MEDIA-QUERIES 360px    */
@media (max-width: 22.5rem ) {

}

/* ************************************ */
/* APARTMENT GALLERY SECTION */
/* ************************************ */

.apartments-gallery {
    grid-column: 1 / 3;

    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    column-gap: 3.2rem;
    margin-top: 1.6rem;
}

.apartments-gallery-box img {
}

.aspect-ratio-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.gallery-img-wrapper {
    width: 100%;
    padding-top: 100%; /* 1:1 Quadrat – bei 16:9: 56.25% */
    overflow: hidden;
}

.img-in-grid {
    display: flex;
    justify-content: center;
    align-items: center;
}

.apartments-img-tall {
    max-width: 60%;
}

.apartments-img-tall.zoomed {
    max-width: 45%;
}

.apartments-img-wide {
    max-width: 100%;
    transform: scale(1.1);
}

.img-small {
    transform: scale(0.9) translate(20%, 10%);
}

/* MEDIA-QUERIES 940px  */
@media (max-width: 58.75rem) {

}

/* MEDIA-QUERIES 770px  */
@media (max-width: 48.125rem) {

    .img-in-grid {
        width: 90%;
        justify-self: center;
    }

    .apartments-gallery-box:last-child:not(:has(.zoomed)) {
        transform: translate(50%, 0%);
    }

    .apartments-gallery {
        grid-column: auto;

        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;

        column-gap: 0;
        row-gap: 3.2rem;
        margin: 8rem 12.8rem;
    }


}

/* MEDIA-QUERIES 600px   */
@media (max-width: 37.5rem) {

    .apartments-gallery {
        margin: 8rem 6.4rem;
    }
}

/* MEDIA-QUERIES 360px    */
@media (max-width: 22.5rem ) {

    .apartments-gallery {
        margin: 4.8rem 3.2rem;
    }
}