/* SM */
@media (min-width: 576px) {
    #landing-text #bottom {
        width: 70%
    }

    #landing-button {
        height: 36px;
        padding: 0 24px;
        border: 0;
        border-radius: 8px
    }
    #landing-text #bottom {
        font-size: 28px;
        text-align: center
    }

    #landing-text #top {
        color: var(--color-white);
        font-family: "Inter";
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.5px
    }

    #landing-button {
        background-color: var(--color-yellow);
        font-size: 13px
    }

    #section-one #image {
        width: 450px;
        max-width: 80%;
        height: auto;
        aspect-ratio: 7/4;
    }

    #section-one-text {
        width: 402px;
        max-width: 70%;
    }

    #section-two #title {
        width: 450px;
        max-width: 80%;
    }

    #section-four #title {
        width: 450px;
        max-width: 80%;
    }

    #section-four #content {
        width: 402px;
        max-width: 70%;
        gap: 32px;
        justify-content: baseline;
        flex-wrap: wrap
    }

    #section-five #map {
        width: 450px;
        max-width: 80%;
        height: auto;
        aspect-ratio: 7/4
    }

    #section-five-content {
        width: 402px;
        max-width: 70%;
        height: fit-content;
        gap: 32px
    }
}
  
/* MD - ≥ 768px */
@media (min-width: 768px) {
    #landing-text #bottom {
        width: 80%
    }

    #landing-button {
        height: 40px;
        padding: 0 28px;
        border: 0;
        border-radius: 8px
    }
    #landing-text #bottom {
        font-size: 36px;
        text-align: center
    }

    #landing-text #top {
        color: var(--color-white);
        font-family: "Inter";
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.5px
    }

    #landing-button {
        background-color: var(--color-yellow);
        font-size: 13px
    }

    #section-one #image {
        width: 560px;
        max-width: 80%;
        height: auto;
        aspect-ratio: 7/4;
    }

    #section-one-text {
        width: 512px;
        max-width: 70%;
    }

    #section-two #title {
        width: 560px;
        max-width: 80%;
    }

    #section-four #title {
        width: 560px;
        max-width: 80%;
    }

    #section-four #content {
        width: 512px;
        max-width: 70%;
        gap: 32px;
        justify-content: baseline;
        flex-wrap: wrap
    }

    #section-five #map {
        width: 560px;
        max-width: 80%;
        height: auto;
        aspect-ratio: 7/4
    }

    #section-five-content {
        width: 512px;
        max-width: 70%;
        height: fit-content;
        gap: 32px
    }
}
  
/* LG - ≥ 992px */
@media (min-width: 992px) {
    #landing-text #bottom {
        width: 68%
    }

    #section-one #image {
        width: 620px;
        max-width: 70%;
        height: auto;
        aspect-ratio: 7/4;
    }

    #section-one-text {
        width: 572px;
        max-width: 65%;
    }

    #section-two #title {
        width: 620px;
        max-width: 80%;
    }

    #section-four #title {
        width: 620px;
        max-width: 80%;
    }

    #section-four #content {
        width: 572px;
        max-width: 70%;
        gap: 32px;
        justify-content: baseline;
        flex-wrap: wrap
    }

    #section-five #map {
        width: 620px;
        max-width: 80%;
        height: auto;
        aspect-ratio: 7/4
    }

    #section-five-content {
        width: 572px;
        max-width: 70%;
        height: fit-content;
        gap: 32px
    }
}
  
/* XL - ≥ 1200px */
@media (min-width: 1200px) {
        #section-five #kontakt {
        position: relative;
        top: -62%
    }

    #section-one {
        width: 100%;
        height: fit-content;
        margin-top: 104px;
        margin-bottom: 104px;
        display: flex;
        flex-direction: row;
        gap: 52px;
        align-items: center;
        justify-content: center
    }

    #section-one #image {
        width: 400px;
        max-width: 70%;
        height: auto;
        aspect-ratio: 9/6;
    }

    #section-one-text {
        width: 360px;
        max-width: 65%;
    }

    #section-two #title {
        width: 892px;
        max-width: 100%;
    }

    

    #section-four #title {
        width: 892px;
        max-width: 80%;
    }

    #section-four #content {
        width: 760px;
        max-width: 100%;
        gap: 32px;
        justify-content: baseline;
        flex-wrap: wrap
    }

    #section-five {
        width: 100vw;
        height: fit-content;
        gap: 80px;
        justify-content: center;
        margin-bottom: 104px;
        flex-direction: row;
    }

    #section-five #map {
        width: 400px;
        max-width: 80%;
        height: auto;
        aspect-ratio: 9/7
    }

    #section-five-content {
        width: 340px;
        max-width: 70%;
        height: fit-content;
        gap: 32px
    }

    #section-two-content {
        width: 960px;
        max-width: 100%;
        flex-direction: row;
        gap: 32px;
        flex-wrap: wrap
    }

}
  
/* XXL - ≥ 1400px */
@media (min-width: 1400px) {
    #section-one {
        width: 100%;
        height: fit-content;
        margin-top: 104px;
        margin-bottom: 104px;
        display: flex;
        flex-direction: row;
        gap: 52px;
        align-items: center;
        justify-content: center
    }


    #section-one #image {
        width: 500px;
        max-width: 70%;
        height: auto;
        aspect-ratio: 9/6;
    }

    #section-one-text {
        width: 360px;
        max-width: 65%;
    }

    #section-two #title {
        width: 892px;
        max-width: 100%;
    }

    

    #section-four #title {
        width: 892px;
        max-width: 80%;
    }

    #section-four #content {
        width: 760px;
        max-width: 100%;
        gap: 32px;
        justify-content: baseline;
        flex-wrap: wrap
    }

    #section-five {
        width: 100vw;
        height: fit-content;
        gap: 80px;
        justify-content: center;
        margin-bottom: 104px;
        flex-direction: row;
    }

    #section-five #map {
        width: 400px;
        max-width: 80%;
        height: auto;
        aspect-ratio: 9/7
    }

    #section-five-content {
        width: 340px;
        max-width: 70%;
        height: fit-content;
        gap: 32px
    }

    #section-two-content {
        width: 960px;
        max-width: 100%;
        flex-direction: row;
        gap: 32px;
        flex-wrap: wrap
    }
}