.hero {
    width: 100%;
    position: relative;
}

.hero .background,
.hero .background-group,
.hero .background .desktop,
.hero .background .mobile {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.hero .background-group {
    display: none;
}

.hero .background-group.active {
    display: block;
}

.hero .background .mobile {
    display: none;
}

.hero .background video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.home-content {
    background-color: var(--red);
    color: var(--white);
    position: relative;
    width: 100%;
}

.home-content .font-size-2 {
    text-align: center;
    text-transform: uppercase;
}

.intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(80 * var(--size));
    gap: calc(80 * var(--size));
    margin-bottom: calc(108 * var(--size));
}

.intro .font-size-2,
.intermission .font-size-2 {
    max-width: calc(780 * var(--size));
    width: 100%;
    text-transform: uppercase;
}

.intro .c-grid {
    position: relative;
}

.intro .c-grid .column {
    -webkit-grid-column: span 7;
    grid-column: span 7;
}

.intro .column-image {
    width: 100%;
    margin-bottom: calc(64 * var(--size));
}

.intro .intro-text {
    width: 100%;
    max-width: calc(546 * var(--size));
}

.intro .c-grid .image:nth-child(2),
.intro .c-grid .image:nth-child(3) {
    position: absolute;
}

.intro .c-grid .image:nth-child(2) {
    width: calc(202 * var(--size));
    right: 0;
    top: calc(150 * var(--size));
}

.intro .c-grid .image:nth-child(3) {
    width: calc(318 * var(--size));
    right: 0;
    bottom: calc(27 * var(--size));
}

.intermission {
    display: flex;
    flex-direction: column;
    gap: calc(80 * var(--size));
    align-items: center;
}

.intermission .c-grid {
    position: relative;
}

.intermission .c-grid .column {
    -webkit-grid-column: 6 / span 7;
    grid-column: 6 / span 7;
}

.intermission .column-image {
    width: 100%;
    margin-top: calc(245 * var(--size));
}

.intermission .c-grid .image:nth-child(1),
.intermission .c-grid .image:nth-child(2) {
    position: absolute;
}

.intermission .c-grid .image:nth-child(1) {
    width: calc(318 * var(--size));
    left: 0;
    top: 0;
}

.intermission .c-grid .image:nth-child(2) {
    width: calc(202 * var(--size));
    left: 0;
    bottom: calc(154 * var(--size));
}

.menus {
    padding: calc(96 * var(--size)) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.menus-text {
    width: 100%;
    max-width: calc(545 * var(--size));
    margin-top: calc(48 * var(--size));
    margin-bottom: calc(88 * var(--size));
}

.menus-list {
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(32 * var(--size));
}

.menus-list a {
    padding-right: calc(50 * var(--size));
    position: relative;
}

.menus-list a span {
    position: relative;
    display: inline-block;
}

.menus-list a span:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--white);
    -webkit-transition: width 0.35s ease;
    transition: width 0.35s ease;
}

.menus-list a:hover span:before {
    width: 100%;
}

.menus-list a:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: calc(27 * var(--size));
    height: calc(24 * var(--size));
    background-image: url(../../images/arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: transform 0.25s ease;
    transition: transform 0.25s ease;
}

.menus-list a:hover:after {
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
}

.featured-menu {
    margin: calc(96 * var(--size)) 0 0;
    background: var(--white);
    width: 100%;
    max-width: calc(478 * var(--size));
    padding: calc(64 * var(--size)) calc(38 * var(--size));
    color: var(--red);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.featured-text {
    margin: calc(50 * var(--size)) 0;
    text-transform: uppercase;
}

.featured-menu img {
    width: calc(130 * var(--size));
    display: block;
}

.cocktails {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cocktails-text {
    width: 100%;
    max-width: calc(610 * var(--size));
    margin: calc(48 * var(--size)) 0 calc(64 * var(--size));
}

.cocktails a {
    text-transform: uppercase;
    background-color: transparent;
    border: 1px solid var(--white);
    color: var(--white);
    padding: calc(16 * var(--size)) calc(64 * var(--size));
    font-weight: bold;
}

.cocktails a:hover {
    background-color: var(--white);
    color: var(--red);
}

.gallery {
    display: flex;
    flex-direction: column;
    gap: calc(108 * var(--size));
    padding-bottom: calc(130 * var(--size));
    margin-top: calc(112 * var(--size));
}

.gallery .c-grid:first-child .column {
    -webkit-grid-column: 3 / span 8;
    grid-column: 3 / span 8;
}

.gallery .c-grid:nth-child(2) .column {
    -webkit-grid-column: span 7;
    grid-column: span 7;
}

.gallery .c-grid:first-child .column-image,
.gallery .c-grid:nth-child(2) .column-image {
    width: 100%;
}

.gallery .c-grid:nth-child(2) .column-image {
    margin-bottom: calc(150 * var(--size));
}

.gallery .c-grid:nth-child(2) .image:nth-child(2) {
    position: absolute;
    top: calc(107 * var(--size));
    right: 0;
    width: calc(318 * var(--size));
}

.gallery .c-grid:nth-child(2) .image:nth-child(3) {
    position: absolute;
    bottom: 0;
    right: calc(95 * var(--size));
    width: calc(202 * var(--size));
}

.home-content .wide-column-image {
    -webkit-grid-column: 2 / span 10;
    grid-column: 2 / span 10;
}

.home-content .wide-column-image {
    -webkit-grid-column: 2 / span 10;
    grid-column: 2 / span 10;
}

/* RESPONSIVE */
@media only screen and (max-width: 740px) {
    .hero .background .desktop {
        display: none;
    }

    .hero .background .mobile {
        display: block;
    }

    .intro {
        gap: calc(64 * var(--size));
        margin-bottom: calc(64 * var(--size));
    }

    .intro .c-grid .column,
    .intermission .c-grid .column {
        -webkit-grid-column: span 12;
        grid-column: span 12;
    }

    .intro .c-grid .image:nth-child(2) {
        width: calc(170 * var(--size));
        bottom: calc(420 * var(--size));
        top: unset;
    }

    .intro .c-grid .image:nth-child(3) {
        position: relative;
        bottom: unset;
        right: unset;
        -webkit-grid-column: span 8;
        grid-column: span 8;
        margin-top: calc(340 * var(--size));
        width: unset;
    }

    .home-content .wide-column-image {
        -webkit-grid-column: span 12;
        grid-column: span 12;
    }

    .intermission {
        gap: calc(64 * var(--size));
    }

    .intermission .c-grid .image:nth-child(1) {
        position: relative;
        bottom: unset;
        right: unset;
        -webkit-grid-column: span 8;
        grid-column: span 8;
        margin-top: calc(320 * var(--size));
        width: unset;
    }

    .intermission .c-grid .image:nth-child(2) {
        width: calc(175 * var(--size));
        top: 0;
        right: 0;
        left: unset;
        bottom: unset;
    }

    .intermission .column-image {
        margin-top: calc(50 * var(--size));
    }

    .menus {
        padding-top: calc(72 * var(--size));
    }

    .menus-text {
        margin-top: calc(40 * var(--size));
        margin-bottom: calc(72 * var(--size));
        max-width: calc(345 * var(--size));
    }

    .menus-list a {
        padding-right: calc(36 * var(--size));
    }

    .menus-list a:after {
        width: calc(18 * var(--size));
        height: calc(16 * var(--size));
    }

    .featured-menu {
        padding: calc(64 * var(--size)) calc(30 * var(--size));
    }

    .featured-text {
        margin: calc(40 * var(--size)) 0 calc(64 * var(--size));
        font-size: var(--font-size-1);
        line-height: var(--line-height-1);
    }

    .cocktails-text {
        margin: calc(40 * var(--size)) 0 calc(46 * var(--size));
    }

    .cocktails a {
        padding: calc(16 * var(--size)) calc(55 * var(--size));
    }

    .gallery {
        margin-top: calc(64 * var(--size));
        gap: calc(64 * var(--size));
        padding-bottom: calc(110 * var(--size));
    }

    .gallery .c-grid:first-child .column {
        -webkit-grid-column: span 12;
        grid-column: span 12;
    }

    .gallery .c-grid:nth-child(2) {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-end;
    }

    .gallery .c-grid:nth-child(2) .column {
        width: 100%;
    }

    .gallery .c-grid:nth-child(2) .image:nth-child(2) {
        position: relative;
        width: calc(270 * var(--size));
        top: unset;
        right: unset;
        margin-bottom: calc(380 * var(--size));
    }

    .gallery .c-grid:nth-child(2) .image:nth-child(3) {
        right: unset;
        left: 0;
        top: calc(465 * var(--size));
        width: calc(175 * var(--size));
    }

    .gallery .c-grid:nth-child(2) .column-image {
        margin-bottom: 0;
    }
}