/* ===============================
   RESPONSIVE: SMALL MOBILES
   =============================== */

@media (max-width: 361px) {
    #section-4 {
        min-height: 104vh;
    }

    #section-9 {
        min-height: 105vh;
    }
}

@media (max-width: 400px) {
    .custom-event-card-eventLinks {
        flex-direction: column;
    }

    .custom-event-card-filter {
        margin-top: 10px;
        justify-content: flex-start;
    }
}

/* ===============================
   RESPONSIVE: TABLET
   =============================== */
@media (min-width: 760px) {
    /*HERO SECTION*/
    #hero-larger-img {
        height: 92%;
    }

    /*BIO*/
    #section-3 .container:first-of-type {
        padding-top: 50px;
    }

    #section-3 .container img {
        width: 100%;
    }

    /*AGENDA*/
    #section-4 {
        min-height: 53dvh;
    }

    /*MEDIA*/
    #section-5 {
        min-height: 54dvh;
    }

        #section-5 .container {
            padding-top: 50px;
        }

    /*CONTACT*/

    #section-8 .section-subtitle {
        margin-bottom: 0;
    }

    .contact-title {
        margin-bottom: 5px;
    }

    .contact-last-box .row {
        margin-bottom: 30px;
    }

    .contact-persn {
        margin-bottom: 60px;
    }

    /* FOOTER */
    footer {
        height: 460px;
    }

        footer .container {
            padding-top: 50px;
            padding-bottom: 50px;
        }

    .logo-row img {
        width: 20%;
    }

    .nav-row ul {
        flex-direction: row;
        justify-content: space-evenly;
        gap: 20px;
    }

    .nav-row a {
        font-size: 18px;
    }

    .icons-row ul {
        width: auto;
        gap: 20px;
    }

    /* SHOP */
    #section-9 {
        height:100dvh;
    }
}

@media (min-width: 820px) {
    /*HERO SECTION*/
    #hero-larger-img {
        height: 88%;
    }

    /*AGENDA*/
    #section-4 {
        min-height: 47dvh;
    }

    /*MEDIA*/
    #section-5 {
        min-height: 47dvh;
    }
}

@media (min-width: 1024px) {
    /*BIO*/
    #section-3 .container:first-of-type {
        padding-top: 70px;
    }

    #section-3 .container img {
        width: 75%;
    }

    /*NIEUWSBRIEF*/
    #section-7 {
        position: relative;
        height: 30dvh;
    }

    /*MEDIA*/
    #section-5 {
        min-height: 53dvh;
    }

        #section-5 .container {
            padding-top: 70px;
        }

    /*CONTACT*/
    #section-8 {
        min-height: 40dvh;
    }


    /* FOOTER */
    footer {
        height: 550px;
    }
}


/* ===============================
   RESPONSIVE: DESKTOP
   =============================== */
@media (min-width: 1080px) and (min-height: 900px) {

    /*HERO SECTION*/
    #hero-larger-img {
        height: 90%;
    }

    /*%UZIEK*/
    #section-2 {
        min-height: 100dvh;
    }

        #section-2 .container {
            padding-bottom: 50px;
        }

    /*BIO*/

    #bio-text-left, #bio-text-right {
        width: 100%;
    }

    #section-3 {
        height: 110dvh;
    }

        #section-3 .container .section-title {
            margin-top: 10px;
        }

        #section-3 .container img {
            position: absolute;
            bottom: 0;
            width: 33%;
        }

    /*AGENDA*/
    #section-4 {
        min-height: 35dvh;
    }

    /*MEDIA*/
    #section-5 {
        position: relative;
    }

        #section-5 .container {
            position: relative;
            padding-bottom: 80px;
        }

    /*NIEUWSBRIEF*/
    #section-7 {
        min-height: 50dvh;
    }

    /*CONTACT*/
    #section-8 {
        min-height: 63dvh;
    }


    /* FOOTER */
    .logo-row img {
        width: 15%;
    }

    .nav-row a {
        font-size: 20px;
    }
}

@media (min-width: 1700px) {
    #section-3 .container img {
        position: absolute;
        bottom: 0;
        width: 38%;
    }
}

@media (min-width: 1921px) {

    /*HERO SECTION*/
    #hero-larger-img {
        height: 92%;
    }

    /*%UZIEK*/
    #section-2 {
        min-height: 80dvh;
    }

    #section-2 .container{
        padding-bottom: 0;
    }

    /*BIO*/
    #section-3 .container .section-title {
        margin-top: 40px;
    }

    #section-3 .container img {
        position: absolute;
        bottom: 0;
        width: 40%;
    }

    /*AGENDA*/
    #section-4 {
        min-height: 42dvh;
    }

    /*MEDIA*/
    #section-5 {
        min-height: 78dvh;
    }

    #section-5 .container h1{
        margin-top: 50px;
    }

    /*NIEUWSBRIEF*/
    #section-7 {
        min-height: 50dvh;
    }

    /*CONTACT*/
    #section-8 {
        min-height: 50dvh;
    }


    /* FOOTER */
    .logo-row img {
        width: 15%;
    }

    .nav-row a {
        font-size: 20px;
    }
}

@media (min-aspect-ratio: 21/9) and (min-width: 3000px) {
    #section-3 .container img {
      width: 27%;
  }
}

@supports (-webkit-touch-callout: none) {
    .scroll-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .custom-music-card {
        flex: 0 0 auto;
        min-width: 220px; /* pas aan naar jouw design */
        margin-right: 1rem;
    }

    .custom-music-card img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }
	 .custom-music-card {
        flex-shrink: 0;
    }
}

@supports (-webkit-appearance: none) {
  .custom-music-card {
    /* firewall: zorg dat Safari ook het juiste gedrag heeft */
    flex: 0 0 auto;
    min-width: 220px;
  }
}