@media only screen and (max-width: 1100px) {
    #past-gigs {
        height: 640px !important;
    }

    #past-gigs.active {
        height: auto !important;
    }

    .gig-card {
        width: calc(100% - var(--main-margin)) !important;
    }

    .gig-card p {
        font-size: 30px !important;
    }
}

#tour {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gigs {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    width: 100%;
}

.gig-card {
    text-decoration: none;

    position: relative;
    border: 2px dashed var(--main);
    border-radius: 6px;

    color: var(--off);

    width: 50%;
    padding: calc(var(--main-margin) / 2);

    transition: all 0.2s;

    margin: calc(var(--main-margin) / 4);

}

.gig-card-extra-content {
    display: none;
}

.gig-card.active .gig-card-extra-content {
    display: block;
}

.gig-card:not(.past-gig):hover {
    color: var(--main);
    border-radius: 15px;
}

.gig-card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 30px;
}

.expand-gig-icon {
    position: absolute;
    right: calc(var(--main-margin) / 2);
    bottom: calc(var(--main-margin) / 4);

    transition: all 0.2s;
}

.expand-gig-icon.active,
.expand-gig-icon:hover.active {
    transform: rotate(180deg);
}

.expand-gig-icon:hover {
    transform: scale(1.3);
}

.expand-gig-icon.active:hover {
    transform: scale(1.3) rotate(180deg);
}

.past-gig {
    border: 1px dashed var(--off);
}

#past-gigs {
    height: 430px;

    overflow: hidden;
}

#past-gigs.active {
    height: auto;
}

#view-more i {
    transition: all 0.2s;
}

#view-more:hover i {
    transform: scale(1.3);
}

#view-more:hover {
    cursor: default;
}

.venue-and-date h3,
.venue-and-date p {
    margin: calc(var(--main-margin) / 4);
}

.gig-poster {
    height: 400px;
}