@media screen and (max-width: 915px) {

/*------------------------*/
/* Event */

.event-container {
        position: relative;
        display: flex;
        max-width: 100%;
        height: 106.4vw;
        background-color: black;
        flex-direction: column;
        padding-top: 3vw;
	gap: 5vw;
}
.event-elements {
        display: flex;
        flex-direction: column;
        width: 100%;
	align-items: center;

}
.event-graphic {
        display: flex;
        justify-content: center;
        width: 100%;
        height: auto;
        color: white;
}
.event-img {
        display: flex;
        width: 80vw;
        height: 65vw;
        background-color: #191919;
        font-size: 8vw;
        justify-content: center;
        align-items: center;
}
.event-buttons {
    display: flex;
    flex-direction: row;
    gap: 7vw;
    align-items: flex-end; /* aligns buttons inside the column */
    justify-content: center;
    margin-top: 8vw;
  
}
.calendar-button,
.details-button {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: black;
        text-align: center;
	font-size: 4.5vw;
	font-weight: 700;
	width: auto;
	height: 11vw;
	border: none;
	padding: 3vw;
}
.calendar-button {
    background-color: #E55A94FA;
}

.details-button {
    background-color: white;
}
.bottom-shapes {
        width: 100vw;
        /* Use viewport width to ensure it spans across */
        height: 17.5vw;
        background-color: white;
        /* Add a background color for visibility */


        clip-path: polygon(
        48% 56%,
        48% 100%,
        59% 100%,
        73% 0,
        100% 0,
        100% 100%,
        0 100%,
        33.5% 100%,
        39% 56%);
}

/*------------------------*/
/* Line Up */

.lineup-container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        background-color: white;
        align-items: center;
        justify-content: space-evenly;
	padding: 2vw;
}
.lineup-title {
        font-size: 7vw;
        font-weight: 700;
	margin-bottom: 7vw;
	margin-top: 5vw;
}
.artists-icons {
        display: flex; /* Enables Flexbox */
            flex-direction: column;
        justify-content: center; /* Centers items evenly */
        gap: 20px; /* Adds spacing between items */
        width: 42%;
        max-width: 1200px; /* Adjust width based on layout */
        margin: auto; /* Centers the container */
    }
    
    .artists-post {
            flex:1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
            width: 100%;
            padding-bottom: 2vw;
    
    }
    
    
    .black-outline {
        position: absolute;
        width: 90%;
        z-index: 1;
    }
    
    .artist-post-img {
        position: relative;
        width: 73%; /* Adjust this percentage to fit inside the outline */
        aspect-ratio: 1 / 1;
        z-index: 2; /* Ensure it sits below the outline */
        display: block; /* Ensure it is treated as a block element */
        margin: 8.5% auto 0px auto; /* Center it horizontally */
            overflow: hidden;
            border-radius: 5px; /* Rounds the corners */
            object-fit: cover;
    }
    
    
    .artist-label {
            position: relative;
            width: 70%; /* Adjust width as needed */
            max-width: 550px; /* Prevents it from being too wide */
            background: black; /* Gradient from left to right */
            color: white; /* White text */
            text-align: center; /* Centers the text */
            font-size: clamp(14px, 2vw, 18px); /* Adjust text size */
            font-weight: 700; /* Makes the text stand out */
            margin: -40px auto 0 auto; /* Centers the box horizontally */
            z-index: 3;
    }
    
    .artist-social-icons {
            position: relative;
            display: flex;
            justify-content: center;
            z-index: 2;
            width: 50%;
            height: auto;
            margin: 30px;
            gap: 3px;
    }
    
    .artist-social-icons img {
            width: 6vw; /* Shrinks between 20px and 40px */
            height: auto;
    }


/*------------------------*/
/* Buy Tickets */

.tickets-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 43vw;
        background-color: black;
}
.tickets-button {
        display: flex;
        width: 60vw;
        height: 22vw;
        background-image: linear-gradient(to right, #E55A94, #3E9DA2);
        color: white;
        font-size: 4.5vw;
        font-weight: 700;
        align-items: center;
        justify-content: center;
}

/*------------------------*/
/* Event Information */

.event-info-container {
        display: flex;
        flex-direction: column;
        background-color: #3E9DA2;
        width: 100%;
        height: auto;
        justify-content: center;
        align-items: center;
	gap: 11vw;
	padding: 10vw 9vw 10vw 9vw;
}
.event-info-elements {
        display: flex;
        flex-direction: column;
        gap: 9vw;
}
.event-info-title {
        color: white;
        font-size: 9vw;
        font-weight: 700;
}
.event-info-top {
        display: flex;
	flex-direction: column;
        gap: 7vw;
}
.event-info-bottom a {
	color: white;
	text-decoration: underline;
}
.event-info-bottom a:hover {
	color: #e8e8e8;
}
.info-title {
        font-weight: 700;
}
.info-text {
        font-weight: 300;
        font-size: 5vw;
        color: white;
}
.map-container {
        width: auto;
        height: auto;
}
.map {
        width: 80vw;
        height: 62.8vw;
}

/*------------------------*/
/* Kapture Experience */
.container-kap-exp {
        position: relative;
        width: 100%;
        height: auto;
        font-size: 5vw;
        font-weight: 700;
        line-height: 75px;
        text-align: center;
        padding: 8%;
}
.exp-main-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 4.5vw;
}
.exp-main-content img {
        width: 11.1vw;
}



.calendar-button:hover {
        background-color: #ed81a5;
}

.details-button:hover {
        background-color: #b3b3b3;
}



}