.parent {
    display: grid;
    grid-template-columns: repeat(1, auto);
    grid-auto-rows: minmax(1, auto);
    width: 100%;
    max-width: 1500px; /* Set this to the width of your desktop layout */
    margin: 0 auto;
}

.parent img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.parent > div {
    min-height: 0; 
}

[draggable=true] {
    cursor: move;
}

.parent a:hover {
    text-decoration: underline;
}


.gig-title {
    grid-column: 1 / -1;
    text-align: center;
    font-size: clamp(1.5rem, 4vw, 2rem);
    padding: 1rem 0;
}

@media screen and (max-width: 768px) {
    .parent {
        grid-column: 2;
    }
}
    
.div1 { grid-area: 1 / 1 / 2 / 13; }
.div2 { grid-area: 3 / 2 / 4 / 3; }
.div3 { grid-area: 3 / 3 / 4 / 4; }
.div4 { grid-area: 4 / 3 / 5 / 4; }
.div5 { grid-area: 4 / 2 / 5 / 3; }
.div6 { grid-area: 5 / 2 / 6 / 3; }
.div7 { grid-area: 5 / 3 / 6 / 4; }
.div8 { grid-area: 7 / 4 / 10 / 6; }
.div9 { grid-area: 10 / 3 / 11 / 4; }
.div10 { grid-area: 11 / 3 / 12 / 4; }
.div11 { grid-area: 11 / 4 / 12 / 5; }
.div12 { grid-area: 4 / 8 / 6 / 11; }
.div13 { grid-area: 7 / 11 / 8 / 12; }
.div14 { grid-area: 7 / 12 / 8 / 13; }
.div15 { grid-area: 8 / 11 / 9 / 12; }
.div16 { grid-area: 8 / 12 / 9 / 13; }
.div17 { grid-area: 8 / 7 / 10 / 9; }
.div18 { grid-area: 11 / 10 / 13 / 12; }
.div19 { grid-area: 11 / 6 / 12 / 7; }
.div20 { grid-area: 11 / 7 / 12 / 8; }
.div21 { grid-area: 12 / 6 / 13 / 7; }
.div22 { grid-area: 12 / 7 / 13 / 8; }
.div23 { grid-area: 4 / 5 / 5 / 6; }
.div24 { grid-area: 4 / 6 / 5 / 7; }
.div25 { grid-area: 5 / 5 / 6 / 6; }
.div26 { grid-area: 5 / 6 / 6 / 7; }
.div27 { grid-area: 9 / 1 / 10 / 2; }
.div28 { grid-area: 9 / 2 / 10 / 3; }
.div29 { grid-area: 10 / 1 / 11 / 2; }
.div30 { grid-area: 10 / 2 / 11 / 3; }
.div31 { grid-area: 9 / 10 / 10 / 11; }
.div32 { grid-area: 9 / 11 / 10 / 12; }
.div33 { grid-area: 9 / 12 / 10 / 13; } 


@media screen and (max-width: 768px) {
    .parent {
        display: flex;
        flex-direction: column;
    }
}