.event-page-header {
    text-align: center;
    margin-top: .5em;
    margin-bottom: 0em;
    font-size: clamp(1.2rem, 4vw + 10px, 2rem);
    font-weight: 500;
    color: var(--clr-black);
}

.main-section-container {
    width: calc(100% - 4rem);
    max-width: 1530px;
    margin: 0 auto;  
}

.cards-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    align-items: center;
    margin: 2rem 2rem 3rem 2rem;
    color: var(--clr-black);
}

.card-container {
    max-width: 700px;
    min-width: 150px;
    box-shadow: 0 2px 4px 0 rgba(18,18,18, 0.1), 
                0 6px 10px 0 rgba(18,18,18, 0.1);
    border-radius: var(--border-radius-med);
}

.band-photo {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    max-height: 400px;
    object-position: center;
    border-radius: var(--border-radius-med) var(--border-radius-med) 0 0;
}

.details-container {
    margin: 1rem;
}

.bands-container {
    display: grid;
    grid-template-rows: max-content;
}

.headliner-act {
    margin-bottom: .1em;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.support-acts {
    font-size: 0.9rem;
    padding-left: 1em;
    font-weight: 300;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-details {
    margin: .7em 0 1rem 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    font-size: 1.1rem;
    column-gap: 1em;
    row-gap: .2em;
}

.event-date {
    grid-column: 1/2;
}

.event-time {
    grid-row: 2/3;
}

.event-btn-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: .7em;
}

.btn-event {
    padding: .3em;
    text-align: center;
    font-weight: 500;
    border: 3px solid transparent;
    border-radius: var(--border-radius-med);
}

.btn-tickets {
    background: var(--clr-main);
    color: var(--clr-black);
    border-radius: var(--border-radius-med);
}

.btn-artist-info {
    background: var(--clr-black);
    color: var(--clr-white);
}

.btn-artist-info:focus,
.btn-artist-info:hover,
.btn-tickets:focus,
.btn-tickets:hover {
    background: var(--clr-black);
    border: 3px solid var(--clr-accent-one);
    color: var(--clr-accent-one);
}

@media  (max-width: 1000px)   {
    .main-section-container {
        --page-margin-mobile: 2rem;
        width: calc(100% - var(--page-margin-mobile));
        max-width: 1530px;
        margin: 0 auto;
    }

    .cards-section {
        margin: 2rem 1.4rem 3rem 2rem;
    }
}

@media screen and (max-width: 917px) {
    .card-container {
        max-width: 900px;
        min-width: 150px;
        box-shadow: 0 2px 4px 0 rgba(18,18,18, 0.1), 
                    0 6px 10px 0 rgba(18,18,18, 0.1);
        border-radius: 2px;
    }
}

@media (max-width: 450px) {
    .headliner-act {
        font-size: 1.1rem;
        line-height: 1;
    }
    
    .support-acts {
        font-size: .8rem;
        font-weight: 300;    
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;    
    }

    .event-details {
        font-size: .9rem;
    }
}

@media (max-width: 400px) { 
    .event-btn-container {
        grid-template-columns: 1fr;
        row-gap: .7em;
        font-size: .9rem;
    }
}

@media (max-width: 500px) {
    .cards-section {
        grid-template-columns: 1fr;
        place-items: center;
    }
}

@media  (max-width: 650px)   {
    .cards-section {
        margin: 1.5rem 1rem 3rem 1rem;
    }
}

@media (max-width: 400px) {
    .main-section-container {
        --page-margin-mobile: 0rem;
        width: calc(100% - var(--page-margin-mobile));
        margin: 0 auto;
    }

    .cards-section {
        margin: 1.5rem 1.4rem 3rem 1rem;
    }
}