.venue {
    display: flex;
    flex-direction: column;
    gap: var(--padding-2);
    position: relative;
}

.venue .snake-top {
    background-color: var(--theme-red);
    width: 80%;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    position: absolute;
    top: calc(-1 * var(--navbar-height));
}

.venue .snake-top::before {
    content: "";
    position: absolute;
    top: calc(-2 * var(--navbar-height) - var(--padding-1));
    left: 0;
    width: calc(var(--navbar-height) + var(--padding-1));
    height: calc(2 * var(--navbar-height) + var(--padding-1));
    background-color: var(--theme-red);
}

.venue .snake-top::after {
    content: "";
    position: absolute;
    bottom: calc(100% - 1px);
    left: calc(var(--navbar-height) + var(--padding-1));
    width: 16px;
    height: 16px;
    background:
        radial-gradient(
            circle 10px at 100% 100%,
            transparent 16px,
            var(--theme-red) 17px);  /* + 1 px so the edge is smooth */
    transform: rotate(-90deg);
}

.venue .snake-top .map-container {
    display: flex;
    justify-content: space-between;
    gap: var(--padding-2);
    padding: var(--padding-2);
    color: var(--theme-white);
}

.venue .snake-top .map-container h3,
.venue .snake-top .map-container .map a {
    color: var(--theme-white);
    font-weight: 600;
}

.venue .venue-content {
    margin-top: calc(400px + var(--padding-2));
    margin-left: var(--padding-2);
    padding: var(--padding-1);
    align-self: flex-end;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    display: flex;
    gap: var(--padding-1);
    background-color: var(--theme-white);
}

.venue .venue-content h3 {
    margin: var(--padding-1) 0;
}

.venue .venue-content .venue-image {
    flex: 1;
    display: grid;
    place-items: center;
}

.venue .venue-content .venue-text {
    flex: 2;
}

.venue .venue-content img {
    border-radius: var(--border-radius-inner);
}

@media(max-width: 1200px) {
    .venue .snake-top {
        top: calc(-1 * var(--padding-0));
    }

    .venue .snake-top::before {
        top: calc(-2 * var(--navbar-height) - var(--padding-0));
        height: calc(2 * var(--navbar-height) + var(--padding-0));
        width: calc(var(--navbar-height) + var(--padding-2));
    }

    .venue .snake-top::after {
        left: calc(var(--navbar-height) + var(--padding-2));
    }

    .venue .snake-top .map-container {
        flex-direction: column-reverse;
        align-items: center;
    }

    .venue .venue-content {
        margin-top: calc(700px + var(--navbar-height));
    }
}

@media(max-width: 1068px) {
    .venue .venue-content {
        flex-direction: column;
        align-items: center;
        width: fit-content;
    }
}

@media(max-width: 600px) {
    #map {
        width: 232px;
        height: 232px;
    }

    .venue .snake-top {
        position: unset;
    }

    .venue .snake-top::before {
        top: calc(-2 * var(--navbar-height) - var(--padding-1));
        height: calc(2 * var(--navbar-height) + var(--padding-1));
        width: var(--navbar-height);
    }

    .venue .snake-top::after {
        left: var(--navbar-height);
    }

    .venue .venue-content {
        text-align: center;
        margin-top: 0;
    }

    .venue .venue-content img {
        width: 256px;
    }
}