<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">:root {
    --red: hsl(0, 79%, 57%);
    --beige: hsl(31, 49%, 81%);
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../fonts/Fira-Sans/FiraSans-Regular.woff2') format('woff2'),
        url('../fonts/Fira-Sans/FiraSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../fonts/Fira-Sans/FiraSans-SemiBold.woff2') format('woff2'),
        url('../fonts/Fira-Sans/FiraSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../fonts/Fira-Sans/FiraSans-Bold.woff2') format('woff2'),
        url('../fonts/Fira-Sans/FiraSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ══════════════════════════════════════════════════════════════════════════════════════
════════════════════════════════════════ GENERAL ════════════════════════════════════════
══════════════════════════════════════════════════════════════════════════════════════ */

*::selection {
    background-color: white;
}

body {
    font-family: 'Fira Sans';
    background: black;
    overflow-x: hidden;
}

h1 {
    font-size: 4.2rem;
}

h1::selection,
h2::selection {
    background-color: white;
    color: black;
}

h2 {
    font-size: 3.2rem;
    line-height: 3.3rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

h3 {
    font-size: 1.6rem;
}

p {
    font-size: 1.1rem;
}

ul {
    list-style-type: none;
    padding-left: 0;
}

a {
    color: black;
    text-decoration: none;
}

button {
    background: none;
    border: none;
    color: white;
    padding: 0;
}

button:hover {
    cursor: pointer;
    color: var(--red);
}

button svg:hover {
    fill: var(--red);
}

input {
    outline: none;
}

.header__inner,
.modal__inner,
.segment__inner,
.footer__inner {
    max-width: 90rem;
    margin: 0 auto;
}

.campaign-gf {
    background-size: 43rem;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 10%;
}

/* --------------------------- 📱 General media queries ------------------------------ */

@media (max-width: 80rem) {
    h1 {
        font-size: 3rem;
    }
    h2 {
        font-size: 2.1rem;
    }
    p {
        font-size: 1rem;
    }
    h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 48rem) {
    h1 {
        font-size: 2.4rem;
        line-height: 2.5rem;
    }
    h2 {
        font-size: 1.6rem;
        line-height: 1.7rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
════════════════════════════════════════ HEADER ═════════════════════════════════════════
══════════════════════════════════════════════════════════════════════════════════════ */

header {
    background-color: black;
    color: white;
    font-size: 1rem;
    font-weight: 600;
}

header a {
    color: white;
}

header a:focus {
    outline: 2px solid #fff;
    outline-offset: 0.4rem;
    position: relative;
    z-index: 3;
}

header a::selection,
header p::selection {
    color: black;
}

.menu__link,
.accessibility {
    position: relative;
}

.menu__link:hover::before,
.menu__link:hover::after,
.accessibility:hover::before,
.accessibility:hover::after,
.menu__link--active::before,
.menu__link--active::after {
    content: '';
    display: block;
    position: absolute;
}

.menu__link:hover::after,
.accessibility:hover::after,
.menu__link--active::after {
    height: 0.8rem;
    width: 1.6rem;
    background-color: white;
    top: 37px;
}

.menu__link:hover::before,
.accessibility:hover::before,
.menu__link--active::before {
    width: 2rem;
    height: 2rem;
    background-color: black;
    top: 2.5rem;
    left: -0.2rem;
    z-index: 1;
}

.menu__link--active:hover::before,
.menu__link--active::before {
    left: 0.2rem;
}

.header__inner {
    position: relative;
    padding: 4rem 2.2rem;
    transition: 0.3s ease;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    justify-content: space-between;
}

/* ----------------------------------- Main-nav -------------------------------------- */

.main-navigation {
    display: flex;
    align-items: center;
}

/* Logo */

.logo__container:hover::after {
    content: '';
    display: none;
}

.logo-gf {
    width: 13.5rem;
    transition: 0.3s ease;
}

.logo-gf::selection {
    background: none;
}

.logo-gf--black {
    filter: invert(1);
}

/* Menu */

.menu__wrapper {
    padding-left: 3.4rem;
}

.menu {
    display: flex;
    gap: 3rem;
}

/* ---------------------------------- Mobile-nav ------------------------------------- */

.mobile-navigation {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* Language button */

.language-button {
    position: relative;
    text-transform: uppercase;
    padding-right: 1.4rem;
}

.language--active::after {
    content: '';
    display: inline-block;
    position: absolute;
    background-image: url(../img/gentse-feesten-icoontjes/chevron-down.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 1.6rem;
    height: 1.6rem;
}

.language--active:hover::after {
    background-image: url(../img/gentse-feesten-icoontjes/chevron-down--red.svg);
}

/* Language button (when open) */

.language-button--open:hover {
    color: white;
}

.language--active:hover {
    color: var(--red);
}

.language-button--open .language--active::after {
    background-image: url(../img/gentse-feesten-icoontjes/chevron-down.svg);
    transform: rotate(180deg);
}

.language-button--open .language--active:hover::after {
    background-image: url(../img/gentse-feesten-icoontjes/chevron-down--red.svg);
}

.languages {
    display: none;
    position: absolute;
    border: 1px solid white;
    background-color: black;
    top: 2rem;
    left: -1rem;
    box-shadow: 10px 10px 20px -5px rgba(0,0,0,0.3);
    z-index: 1;
}

.language-button--open .languages {
    display: block;
}

.languages:hover {
    color: white;
}

.language {
    padding: 0.6rem 1.6rem;
}

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

/* Search button */

.search-button__container {
    margin-top: 0.4rem;
}

.search-button {
    width: 1.2rem;
}

.search-button:hover {
    fill: var(--red);
    cursor: pointer;
}

/* Hamburger menu */

.menu-button__wrapper {
    padding-top: 0.5rem;
}

.menu-button {
    width: 3.4rem;
}

/* ------------------------------------- Modal ---------------------------------------- */

.modal {
    background-color: var(--red);
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    top: 100%;
    left: 0;
}

.modal__inner {
    padding: 4rem 2.2rem;
}

.modal__image {
    width: 40vw;
    height: 100vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--beige);
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.modal-open {
    top: 0;
}

/* Modal header with logo, languages, search- and close-button */

.modal__header {
    display: flex;
    justify-content: space-between;
}

.logo--modal path {
    fill: black;
}

.modal button {
    color: black;
}

.modal button:hover {
    color: white;
}

.modal button svg:hover {
    fill: white;
}

.modal .search-button:hover {
    fill: white;
}

/* Modal navigation with program */

.modal__navigation {
    padding-top: 6rem;
}

.modal__navigation li {
    padding-bottom: 1.2rem;
}

.modal__navigation a {
    color: black;
}

.modal__navigation a:hover {
    color: white;
}

/* Modal language button */

.modal .language--active {
    color: black;
}

.modal .language--active:hover {
    color: white;
}

.modal .language--active::after {
    filter: invert(1);
}

.modal .language--active:hover::after {
    background-image: url(../img/gentse-feesten-icoontjes/chevron-down.svg);
    filter: invert(0);
}

.modal .languages {
    color: white;
}

/* Modal program */

.modal__program__container {
    position: relative;
}

.modal__program {
    position: relative;
    padding-right: 4rem;
}

.modal__program::after {
    content: '';
    background-image: url(../img/gentse-feesten-icoontjes/arrow-right-long.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 4rem;
    height: 1.2rem;
    position: absolute;
    top: 0;
    left: 9rem;
}

.modal__program:hover::after {
    background-image: url(../img/gentse-feesten-icoontjes/arrow-right-long--white.svg);
}

.modal__program__days {
    position: absolute;
    top: 0;
    left: 15rem;
}

/* ---------------------------------- Date sticker ------------------------------------ */

.duration {
    position: absolute;
    background-color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    color: black;
    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    transition: 0.3s ease;
}

.duration span::selection {
    color: black;
}

.duration--top {
    top: 10rem;
    right: 2rem;
}

/* ----------------------------- 📱 Header media queries ------------------------------- */

@media (max-width: 80rem) {
    .menu,
    .accessibility {
        display: none;
    }
    .duration {
        width: 9rem;
        height: 9rem;
        font-size: 1.5rem;
        line-height: 5.8;
        transition: 0.3s ease;
    }
}

@media (max-width: 64rem) {
    .header__inner {
        padding: 2.4rem 2.2rem;
        transition: 0.3s ease;
    }
    .logo-gf {
        width: 9.5rem;
        transition: 0.3s ease;
    }
    .duration {
        transition: 0.3s ease;
    }
    .duration--top {
        top: 6.4rem;
    }
    .modal__inner {
        padding: 2.4rem 2.2rem;
    }
    .modal__image {
        display: none;
    }
}

@media (max-width: 48rem) {
    .header__inner,
    .modal__inner {
        margin-right: 1rem;
        padding: 1.3rem 1rem;
        transition: 0.3s ease;
    }
    .language-button,
    .search-button,
    .duration {
        display: none;
    }
    .mobile-navigation {
        gap: 0;
    }
    .modal__navigation {
        padding-top: 3rem;
    }
    .modal .mobile-navigation {
        gap: 1rem;
    }
    .modal .language-button {
        display: inline-block;
    }
    .modal .search-button {
        display: block;
        width: 1.2rem;
    }
    .menu-button--close {
        width: 2.4rem;
    }
    .modal__program::after {
        left: 7rem;
    }
    .modal__program__days {
        left: 11rem;
    }
    .logo-gf {
        padding-right: 1rem;
        width: 10rem;
    }
}

@media (max-width: 28rem) {
    .modal .logo-gf {
        width: 9rem;
    }
    .modal__program__days {
        position: relative;
        left: 3rem;
        top: 1rem;
    }
    .modal__program::after {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
═════════════════════════════════════════ MAIN ══════════════════════════════════════════
══════════════════════════════════════════════════════════════════════════════════════ */

main a:focus {
    outline: 2px solid #fff;
    outline-offset: 0.3rem;
    position: relative;
    z-index: 3;
}

/* ═══════════════════════════════════ INDEX.HTML ════════════════════════════════════ */

/* ----------------------------------- Home banner ------------------------------------ */

.segment {
    background-color: var(--beige);
}

.segment__inner {
    padding: 8rem 6rem;
    position: relative;
}

/* segment calendar */

.segment__content {
    padding: 6rem 2rem;
    max-width: 34rem;
    margin-left: auto;
    transition: 0.3s ease;
}

.date-cta {
    padding-bottom: 2rem;
    display: block;
    position: relative;
    width: 14rem;
    left: 6rem;
    transition: 0.2s ease;
    overflow: hidden;
}

.date-cta:hover {
    width: 18rem;
    transition: 0.2s ease;
}

.date-cta::before {
    content: '';
    display: block;
    position: absolute;
    background-image: url('../img/gentse-feesten-icoontjes/arrow-right-extra-long.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 8rem;
    height: 3rem;
    left: -4rem;
    transition: 0.2s ease;
}

.date-cta:hover::before {
    left: 0;
    transition: 0.2s ease;
}

.date-cta p {
    font-size: 1.3rem;
    line-height: 1.6rem;
    text-align: right;
    position: relative;
    transition: 0.2s ease;
    left: 0;
}

.date-cta strong {
    font-size: 2rem;
}

/* Calendar grid */

.calendar-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-gap: 1px;
}

.calendar-link--1 { grid-area: 1 / 1 / 2 / 2; }
.calendar-link--2 { grid-area: 1 / 2 / 2 / 3; }
.calendar-link--3 { grid-area: 2 / 1 / 3 / 2; }
.calendar-link--4 { grid-area: 2 / 2 / 3 / 3; }
.calendar-link--5 { grid-area: 2 / 3 / 3 / 4; }
.calendar-link--6 { grid-area: 3 / 1 / 4 / 2; }
.calendar-link--7 { grid-area: 3 / 2 / 4 / 3; }
.calendar-link--8 { grid-area: 3 / 3 / 4 / 4; }
.calendar-link--9 { grid-area: 4 / 2 / 5 / 3; }
.calendar-link--10 { grid-area: 4 / 3 / 5 / 4; }

.calendar-link a {
    display: block;
    background-color: var(--red);
    padding: 1.4rem 0;
    text-align: center;
    transition: 0.2s ease;
}

.calendar-link a:hover {
    background-color: black;
    color: white;
    transition: 0.2s ease;
}

.calendar__day {
    font-size: 1.9rem;
    font-weight: 600;
}

.calendar__date {
    font-size: 1.2rem;
}

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

.segment--dark {
    background-color: black;
    padding: 10rem;
    color: white;
    padding: 0;
}

.segment__content--teasers {
    margin: 0;
    max-width: none;
    overflow: hidden;
    white-space: nowrap;
    padding: 0;
    padding-bottom: 1rem;
}

/* Teasers navigation */

.teasers__navigation {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    padding-bottom: 1rem;
}

.arrow {
    max-width: 8rem;
    width: 100%;
    filter: invert(1);
    overflow: hidden;
}

.arrow--left {
    position: relative;
    transform: rotate(180deg);
    opacity: 70%;
    left: 3rem;
    transition: 0.2s ease;
}

.arrow--right {
    position: relative;
    right: 3rem;
    transition: 0.2s ease;
}

.arrow svg:hover {
    cursor: pointer;
    transition: 0.2s ease;
    fill: black;
}

.arrow--left:hover {
    left: 0;
}

.arrow--right:hover {
    right: 0;
}

/* Event teaser */

.teaser__wrapper {
    position: relative;
    display: inline-block;
    max-width: 30rem;
    width: 100%;
    margin-right: 1rem;
    z-index: 1;
    color: white;
}

.teaser__wrapper:hover {
    cursor: pointer;
}

.teaser__date {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: black;
    text-transform: uppercase;
    font-size: 1.1rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid white;
    transition: 0.3s ease;
}

.teaser__wrapper:hover .teaser__date {
    background-color: var(--red);
    color: black;
    transition: 0.3s ease;
}

.teaser__img {
    width: 100%;
    border: 1px solid white;
    position: relative;
    z-index: -1;
}

.teaser {
    background-color: black;
    border: 1px white solid;
    padding: 2rem;
    width: 80%;
    position: relative;
    bottom: 3rem;
    left: 0;
    transition: 0.3s ease;
    white-space: normal;
}

.teaser p {
    display: inline-block;
}

.teaser__wrapper:hover .teaser {
    bottom: 6rem;
    left: 3rem;
    transition: 0.3s ease;
}

.teaser::after {
    content: '';
    background-color: var(--red);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s ease;
    z-index: -1;
}

.teaser__wrapper:hover .teaser::after {
    top: 2rem;
    left: -2rem;
    transition: 0.3s ease;
}

.teaser__location {
    background-color: var(--red);
    color: black;
    padding: 0.2rem 1rem;
    margin-right: 1rem;
    margin-top: 1rem;
}

.teaser__start {
    margin-top: 1rem;
}

.teaser__paid,
.teaser__accessibility {
    display: none;
}

/* --------------------------------- News teasers ----------------------------------- */

.segment__content--news {
    margin: 0;
    max-width: none;
    position: relative;
    padding-bottom: 0;
    padding-top: 0;
    margin-top: 10rem;
}

/* News special title */

.news__title__wrapper {
    position: absolute;
    transform: rotate(-90deg);
    left: -12rem;
    bottom: 12rem;
}

.news__title {
    display: inline;
    font-size: 10rem;
    z-index: 1;
    position: relative;
}

.news__title span {
    padding: 0 1rem;
    background-color: black;
}

.news__title span::selection {
    color: black;
    background-color: white;
}

.news__title::before {
    content: '';
    display: block;
    width: 110%;
    height: 75%;
    background-color: var(--red);
    position: absolute;
    top: -2rem;
    left: 4rem;
    z-index: -1;
}

/* News grid */

.news__grid__wrapper {
    position: relative;
    left: 12rem;
}

.news__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.news-item--1 { grid-area: 1 / 1 / 2 / 3; }
.news-item--2 { grid-area: 1 / 3 / 2 / 5; }
.news-item--3 { grid-area: 2 / 1 / 3 / 5; }
.news-item--4 { grid-area: 1 / 5 / 3 / 8; }

.news-item {
    border: 1px solid white;
    padding: 1rem 0.8rem;
    color: white;
    font-size: 1.8rem;
    line-height: 2.2rem;
    font-weight: bold;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.3s ease;
}

.news-photo {
    background-image: url(../img/news-decoration-img.jpg);
    background-size: cover;
    background-position: center;
    aspect-ratio: 4 / 5;
}

.news-item:hover {
    color: black;
    background-color: var(--red);
    transition: 0.3s ease;
}

.news-item:hover .arrow--right {
    right: 0;
    filter: invert(1);
}

.news-item--3 .arrow {
    margin-left: auto;
}

.dark-button {
    display: inline-block;
    color: white;
    padding: 1.2rem 1.8rem;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid white;
    margin-top: 3rem;
    transition: 0.3s ease;
}

.dark-button:hover {
    color: black;
    background-color: white;
    transition: 0.3s ease;
}

.dark-button--centered {
    text-align: center;
}

/* ═══════════════════════════════════ NEWS.HTML ═════════════════════════════════════ */

.segment__inner--newspage {
    padding: 0rem 2.2rem;
    padding-bottom: 10rem;
}

.segment__content--newspage {
    margin: 0;
    max-width: none;
}

.news-item--larger {
    max-width: 69rem;
    flex-direction: row;
    padding: 0;
    margin: 4rem auto;
}

.news-item--larger:hover {
    border-color: black;
}

.news-item__left {
    max-width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem 0.8rem;
}

.news-item__right {
    max-width: 70%;
    width: 100%;
    filter: brightness(0.8);
}

.news-item__right img {
    aspect-ratio: 2 / 1;
    width: 100%;
}

.news-item--larger:hover .news-item__right {
    filter: brightness(1);
    transition: 0.3s ease;
}

/* News navigation */

.iems-nav {
    max-width: 69rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.page-button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.4rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 1px solid white;
    transition: 0.3s ease;
}

.page-button:hover {
    color: black;
    background-color: white;
    transition: 0.3s ease;
}

.page-button--active,
.page-button--active:hover {
    color: black;
    background-color: var(--red);
    border-color: red;
}

/* ══════════════════════════════════ SEARCH.HTML ═════════════════════════════════════ */

/* ----------------------------------- Search bar ------------------------------------- */

.search-bar__container {
    display: flex;
    position: relative;
    max-width: 60rem;
    width: 100%;
    margin: 0 auto;
    margin-top: 6rem;
    margin-bottom: 4rem;
}

.search-bar,
.search-bar__button {
    all: unset;
    border: 1px solid white;
}

.search-bar {
    border-right: none;
    width: 100%;
    padding: 1rem;
}

.search-bar:focus {
    outline: 2px solid white;
    outline-offset: -2px;
}

.search-bar::selection {
    color: black;
    background-color: white;
}

.search-bar::placeholder {
    color: white;
}

.search-bar__button {
    border-left: none;
    padding: 0.6rem 1.2rem;
    transition: 0.3s ease;
}

.search-bar__button:hover {
    background-color: white;
    transition: 0.3s ease;
}

.search-bar__button:hover svg {
    fill: black;
    transition: 0.3s ease;
}

/* ------------------------------- Search feedback ---------------------------------- */

.search-feedback--hidden {
    display: none;
}

.events--hidden {
    display: none;
}

.search-feedback__paragraph {
    padding-bottom: 2rem;
    font-size: 1.6rem;
    text-align: center;
}

.search-feedback__paragraph::selection,
.search-feedback__paragraph strong::selection {
    color: black;
    background-color: white;
}

/* -------------------------------- Search events ----------------------------------- */

.events .search-events {
    padding-bottom: 4rem;
}

/* ═══════════════════════════════════ DAY.HTML ═════════════════════════════════════ */

/* ---------------------------- Compact header calendar ----------------------------- */

.calendar-links__wrapper {
    margin: 0 auto;
    max-width: 86rem;
    padding: 0 2.2rem;
    padding-bottom: 4rem;
}

.calendar-links--header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.calendar-links--header .calendar-link {
    width: 9%;
    flex-grow: 1;
}

.calendar-links--header a {
    color: black;
}

.calendar-link--active a {
    padding: 2.6rem 0;
    transition: none;
}

.calendar-link--active a:hover {
    background-color: var(--red);
    transition: none;
}

.calendar-links--header .calendar__date {
    font-weight: 400;
}

/* ------------------------------- Filter section --------------------------------- */

/* All filters */

.filters__container {
    padding-bottom: 2rem;
}

.filters {
    display: flex;
    border: 1px solid var(--beige);
}

.filters__main {
    display: flex;
}

.filters__side {
    display: flex;
}

.filter {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: relative;
    color: var(--beige);
    padding: 1rem 1.2rem;
    font-size: 1.1rem;
    line-height: 1.1rem;
    border-right: 1px solid var(--beige);
    transition: 0.3s ease;
}

.filter--box:hover {
    background-color: var(--beige);
    color: black;
    transition: 0.3s ease;
}

.filter svg {
    width: 1rem;
    transition: 0.3s ease;
}

.filter--box:hover svg {
    fill: black;
    transition: 0.3s ease;
}

.filter--active {
    color: black;
    background-color: var(--beige);
}

.filter--checkbox {
    border: none;
    padding-right: 0;
}

.filter--checkbox::before {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--beige);
}

.filter--checkbox:hover::before {
    background-color: var(--beige);
}

.filters__side button:hover {
    color: var(--beige);
}

.filters__side button svg:hover {
    fill: var(--beige);
}

.accessibility--checked::before {
    background-color: var(--beige);
}

.price--checked::before {
    background-color: var(--beige);
}

/* Filter: all categories */

.categories {
    background-color: var(--beige);
    padding: 3rem;
    padding-bottom: 1.4rem;
    padding-right: 1.4rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    max-height: 30rem;
}

.categories li {
    width: calc(100% / 3);
}

.category {
    font-size: 1.3rem;
    color: black;
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.6rem;
    margin-right: 1.6rem;
}

.category:hover {
    text-decoration: underline;
}

.category::before {
    content: '';
    display: block;
    max-width: 1.4rem;
    width: 100%;
    height: 1.4rem;
    background-image: url(../img/gentse-feesten-icoontjes/tag.svg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 0.2rem;
}

/* Filter: searchbar */

.search-bar__container--beige {
    margin: 0;
    max-width: 50%;
}

.search-bar__container--beige &gt; * {
    border-color: var(--beige);
}

.search-bar__container--beige .search-bar::placeholder {
    color: var(--beige);
}

.search-bar__container--beige .search-bar__button svg {
    fill: var(--beige);
}

.search-bar__container--beige .search-bar__button:hover {
    background-color: var(--beige);
}

.search-bar__container--beige .search-bar__button:hover svg {
    fill: black;
}

/* -------------------------------- Filtered events ----------------------------------- */

/* List/raster buttons */

.event-view {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 2rem;
    gap: 1rem;
}

.raster,
.list {
    all: unset;
    display: block;
    width: 3.6rem;
    height: 3.6rem;
    background-color: black;
}

.raster:hover,
.list:hover {
    background-color: var(--red);
}

.raster svg,
.list svg {
    fill: white;
    width: 100%;
    padding: 1.2rem;
}

.raster:hover svg,
.list:hover svg {
    fill: black;
}

.list svg {
    padding: 1.2rem 1rem;
}

.event-view--active {
    background-color: var(--red);
}

.event-view--active svg {
    fill: black;
}

/* List Events (when the list button is clicked) */

.events--list .teaser__date {
    display: none;
}

.events--list .teaser__img {
    display: none;
}

.events--list .event-category__teasers {
    display: block;
}

.events--list .event-category__teasers .teaser__wrapper {
    max-width: none;
    width: 100%;
    display: block;
}

.events--list .teaser__wrapper:hover .teaser {
    bottom: 0;
    left: 0;
    transition: 0.3s ease;
}

.events--list .teaser {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0;
    bottom: 0;
    overflow: hidden;
    outline: 1px solid white;
    border: none;
}

.events--list .teaser::after {
    content: '';
    background-color: white;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 100%;
    left: 0rem;
    transition: 0.4s ease;
    z-index: 1;
}

.events--list .teaser__wrapper:hover .teaser::after {
    top: 0rem;
    left: 0rem;
    transition: 0.9s ease;
}

.events--list .teaser__start,
.events--list .teaser h3,
.events--list .teaser__location,
.events--list .teaser__paid,
.events--list .teaser__accessibility {
    z-index: 2;
    transition: 0.5s ease;
}

.events--list .teaser__wrapper:hover .teaser__start,
.events--list .teaser__wrapper:hover .teaser h3,
.events--list .teaser__wrapper:hover .teaser__location,
.events--list .teaser__wrapper:hover .teaser__paid,
.events--list .teaser__wrapper:hover .teaser__accessibility {
    filter: invert(100%);
    transition: 0.8s ease;
}

.events--list .teaser__start {
    order: 1;
    max-width: 11%;
    width: 100%;
    padding: 0 1.6rem;
    margin: 0;
}

.events--list .teaser h3 {
    order: 2;
    border-left: 1px solid white;
    border-right: 1px solid white;
    width: 67%;
    padding: 1.6rem;
}

.events--list .teaser__location {
    order: 3;
    margin: 0;
    color: white;
    background: none;
    width: 22%;
    padding: 0 1.6rem;
}

.events--list .teaser__paid,
.events--list .teaser__accessibility {
    order: 4;
    display: block;
    width: 1.2rem;
    margin-right: 1.6rem;
    padding: 0;
}

.events--list .teaser__accessibility {
    order: 5;
}

/* Event category title */

.event-category__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding-bottom: 5rem;
    padding-top: 1rem;
}

.event-category__title h2 {
    margin-bottom: 0;
    text-align: center;
    max-width: 60rem;
}

.go-up svg {
    width: 1.5rem;
    filter: invert(1);
}

/* Event category teasers */

.event-category__teasers {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 10rem;
    align-items: flex-start;
}

.event-category__teasers .teaser__wrapper {
    margin-right: 0;
    max-width: 33%;
    width: 32%;
    flex-grow: 1;
}

/* ----------------------------- Random event-teasers -------------------------------- */

.random-events {
    padding-bottom: 6rem;
}

/* ------------------------------- Other activities ---------------------------------- */

.other-activities {
    display: flex;
}

.other-activities__search {
    width: 100%;
    padding: 0 6rem;
    background-color: var(--red);
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.search-bar__container--white {
    margin: 0;
    max-width: none;
    margin-top: 1.5rem;
    background-color: white;
}

.search-bar__container--white .search-bar:focus {
    outline-color: black;
}

.search-bar__container--white .search-bar::placeholder {
    color: hsl(0, 0%, 30%);
}

.search-bar__container--white .search-bar__button svg {
    fill: black;
}

.search-bar__container--white .search-bar__button:hover {
    background-color: black;
}

.search-bar__container--white .search-bar__button:hover svg {
    fill: white;
}

/* ══════════════════════════════════ DETAIL.HTML ═══════════════════════════════════ */

.event-detail {
    display: flex;
}

/* Hidden till screen is small enough */

.event-detail--mobile {
    display: none;
}

/* ------------------------------ event-detail__left -------------------------------- */

.event-detail__left {
    width: 55%;
}

.event-detail__left p::selection,
.event-detail__left a::selection {
    background-color: white;
    color: black;
}

/* Go back to day page */

.go-back {
    display: flex;
    align-items: center;
    color: white;
    max-width: 24rem;
}

.go-back__arrow {
    transform: rotate(180deg);
    max-width: 6rem;
    fill: white;
}

.go-back p {
    padding-left: 1.6rem;
    background-color: black;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    right: 3rem;
    transition: 0.2s ease;
}

.go-back:hover p {
    right: 0;
    transition: 0.2s ease;
}

/* Event detail content */

.event-detail__content {
    padding: 3rem;
    font-size: 1.2rem;
}

.event-space-time {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap;
}

.event-space-time p,
.event-space-time a {
    font-size: 0.96rem;
}

.event-space {
    color: black;
    background-color: var(--red);
    padding: 0.6rem 0.8rem;
    display: flex;
    align-items: center;
}

.event-space:hover {
    color: white;
    transition: 0.3s ease;
}

.event-space::before {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    background-image: url(../img/gentse-feesten-icoontjes/marker.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.event-space:hover::before {
    filter: invert(1);
    transition: 0.3s ease;
}

.event-accessibility__container {
    width: 2.4rem;
    height: 2.4rem;
    background-color: var(--red);
    border-radius: 50%;
    padding: 0.6rem;
}

.event-description {
    padding: 3rem 0;
    line-height: 2rem;
}

.event-info {
    display: flex;
    padding-bottom: 1rem;
}

.event-info__key {
    font-weight: bold;
    max-width: 16rem;
    width: 100%;
}

.event-info a {
    color: white;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.event-info a:hover {
    text-decoration: none;
}

.event-info__categories a {
    display: block;
}

/* ------------------------------ event-detail__right --------------------------------- */

.event-detail__right {
    width: 45%;
}

/* Photo */

.event-detail__photo {
    padding-bottom: 2rem;
}

/* Socials */

.event-detail__right .socials--event {
    display: flex;
    justify-content: flex-start;
    gap: 0.6rem;
}

.event-detail__right .socials--event a {
    width: 3.4rem;
    height: 3.4rem;
}

/* --------------------------------------- map --------------------------------------- */

.map {
    display: flex;
}

.location {
    font-size: 1.2rem;
    background-color: var(--red);
    padding: 2.6rem;
    width: 30%;
}

.event-space--map {
    display: inline-flex;
    font-size: 1.4rem;
    background-color: black;
    color: white;
    gap: 1rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    margin-bottom: 2rem;
}

.event-space--map:hover {
    background-color: white;
    color: black;
}

.event-space--map::before {
    filter: invert(1);
    width: 1.2rem;
    height: 1.2rem;
}

.event-space--map:hover::before {
    filter: invert(0);
}

.open-in-maps {
    display: block;
    text-decoration: underline;
}

.open-in-maps:hover {
    text-decoration: none;
}

.google-maps {
    width: 70%;
}

/* ----------------------------------- extra events ----------------------------------- */

.segment__inner--events {
    padding-bottom: 0;
}

/* ----------------------------- 📱 Main media queries -------------------------------- */

@media (max-width: 80rem) {
    /* All pages */
    .segment__inner  {
        padding: 8rem 3rem;
        background-size: 38rem;
        background-position-y: 58%;
    }
    .segment__content {
        max-width: 28rem;
        transition: 0.3s ease;
    }

    /* Home page */
    .date-cta p {
        position: relative;
        right: 2rem;
        font-size: 1.2rem;
    }
    .date-cta strong,
    .calendar__day {
        font-size: 1.6rem;
    }
    .calendar__date {
        font-size: 1rem;
    }
    .segment__content--teasers {
        max-width: none;
        padding: 0 1rem;
        transition: 0.3s ease;
    }
    .teaser__wrapper {
        max-width: 25rem;
    }
    .segment__content--news {
        max-width: none;
        padding: 0;
    }
    .news__title__wrapper {
        left: -5rem;
    }
    .news__title {
        font-size: 6rem;
    }

    /* Home and news page */
    .news__grid__wrapper {
        left: 0;
        width: 80%;
        margin-left: auto;
    }
    .news__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    .news-item--1 { grid-area: 1 / 1 / 2 / 2; }
    .news-item--2 { grid-area: 1 / 2 / 2 / 3; }
    .news-item--3 { grid-area: 2 / 1 / 3 / 3; }
    .news-item--4 { grid-area: 3 / 1 / 4 / 3; }
    .news-photo {
        aspect-ratio: 4 / 1;
    }
    .news-item {
        font-size: 1.2rem;
        line-height: 1.6rem;
    }

    /* News page */
    .segment__inner--newspage {
        padding: 0rem 2.2rem;
        padding-bottom: 10rem;
    }

    /* Day page */
    .calendar-links__wrapper {
        margin: 0 auto;
        max-width: 47rem;
    }
    .calendar-links--header .calendar-link {
        width: 19%;
    }
    .calendar-link--active a {
        padding: 1.4rem 0;
        background-color: white;
    }
    .calendar-link--active a:hover {
        background-color: white;
        color: var(--red);
    }
    .filter--box span {
        display: none;
    }
    .category {
        font-size: 1.1rem;
    }
    .other-activities__img {
        max-width: 30%;
        object-fit: cover;
    }
    .other-activities__search {
        padding: 2rem 4rem;
    }

    /* Detail page */
    .event-detail__left {
        width: 60%;
    }
    .event-detail__right {
        width: 40%;
    }
    .event-detail__content {
        font-size: 1rem;
    }
    .event-info__key {
        max-width: 10rem;
    }
    .location {
        width: 40%;
        font-size: 1rem;
    }
    .event-space--map {
        font-size: 1.2rem;
    }
    .google-maps {
        width: 60%;
    }
}

@media (max-width: 64rem) {
    /* All pages */
    .segment__inner  {
        padding: 5rem 1rem;
        background-size: 32rem;
    }

    /* News page */
    .news-photo {
        aspect-ratio: 3 / 1;
    }
    .segment__inner--newspage {
        padding: 0rem 2.2rem;
        padding-bottom: 8rem;
    }
    .news-item__left {
        max-width: 50%;
    }
    .news-item__right {
        max-width: 50%;
    }

    /* Day page */
    .filters {
        flex-direction: column-reverse;
    }
    .filters__side {
        border-bottom: 1px solid var(--beige);
    }
    .filter--box {
        width: 100%;
        justify-content: center;
    }
    .categories {
        max-height: 42rem;
    }
    .categories li {
        width: 50%;
    }
    .go-up svg {
        width: 1rem;
    }
    .event-category__teasers .teaser__wrapper {
        max-width: 50%;
        width: 48%;
    }
    .events--list .teaser {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.6rem 1.2rem;
        padding-right: 3rem;
        transition: none;
    }
    .events--list .teaser__start,
    .events--list .teaser h3,
    .events--list .teaser__location {
        width: 100%;
        max-width: none;
        padding: 0;
        border: none;
        transition: none;
    }
    .events--list .teaser h3 {
        padding: 1rem 0;
        transition: none;
    }
    .events--list .teaser__paid,
    .events--list .teaser__accessibility {
        margin: 0;
        position: absolute;
        bottom: 0;
        right: 0;
        outline: 1px solid white;
        width: 2.4rem;
        padding: 0.6rem;
        transition: none;
    }
    .events--list .teaser__accessibility {
        top: 0;
    }

    /* Detail page */
    .event-detail__left {
        width: 65%;
    }
    .event-detail__right {
        width: 35%;
    }
    .event-detail__content {
        padding-left: 1rem;
    }
    .event-detail__right .socials--event a {
        width: 2.8rem;
        height: 2.8rem;
    }
    .map {
        display: block;
    }
    .location {
        width: 100%;
    }
    .google-maps {
        width: 100%;
    }
}

@media (max-width: 48rem) {
    /* Home page */
    .segment__inner  {
        padding: 0;
        background-size: 24rem;
        background-position-y: 4rem;
        background-position-x: center;
    }
    .segment__content {
        padding: 32rem 0;
        padding-bottom: 0;
        max-width: none;
        transition: 0.3s ease;
    }
    .date-cta {
        width: 12rem;
        left: 4rem;
    }
    .date-cta:hover {
        width: 16rem;
    }
    .date-cta p {
        position: relative;
        right: 2rem;
        font-size: 1rem;
        line-height: 1.3rem;
    }
    .date-cta strong {
        font-size: 1.4rem;
    }
    .calendar-links {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(2, 1fr); 
        grid-gap: 1px;
    }
    .calendar-link--1 { grid-area: 1 / 1 / 2 / 2; }
    .calendar-link--2 { grid-area: 1 / 2 / 2 / 3; }
    .calendar-link--3 { grid-area: 1 / 3 / 2 / 4; }
    .calendar-link--4 { grid-area: 1 / 4 / 2 / 5; }
    .calendar-link--5 { grid-area: 1 / 5 / 2 / 6; }
    .calendar-link--6 { grid-area: 2 / 1 / 3 / 2; }
    .calendar-link--7 { grid-area: 2 / 2 / 3 / 3; }
    .calendar-link--8 { grid-area: 2 / 3 / 3 / 4; }
    .calendar-link--9 { grid-area: 2 / 4 / 3 / 5; }
    .calendar-link--10 { grid-area: 2 / 5 / 3 / 6; }
    .calendar-link a {
        padding: 1rem 0;
    }
    .calendar__day {
        font-size: 1.4rem;
    }
    .segment__content--teasers {
        padding: 4rem 1rem;
        white-space: normal;
        overflow: visible;
    }
    .teasers__navigation {
        display: none;
    }
    .teaser__wrapper {
        max-width: none;
    }
    .teaser {
        width: 85%;
    }
    .teaser__date {
        font-size: 0.9rem;
    }

    /* News page */
    .segment__content--news {
        margin-top: 0;
        padding: 4rem 1rem;
    }
    .news__title__wrapper {
        position: static;
        transform: rotate(0deg);
    }
    .news__title {
        font-size: 4rem;
    }
    .news__title::before {
        width: 100%;
        height: 100%;
        top: -2rem;
        left: 1rem;
    }
    .news__grid__wrapper {
        width: 100%;
        margin-left: 0;
        margin-top: 3rem;
    }
    .news__grid {
        display: block;
    }
    .news-item {
        gap: 3rem;
    }
    .news-item--3 .arrow {
        margin: 0;
    }
    .segment__inner--newspage {
        padding: 0rem 1rem;
        padding-bottom: 6rem;
    }
    .news-item--larger {
        margin: 2rem auto;
        flex-direction: column-reverse;
        gap: 0;
    }
    .news-item__left {
        gap: 2rem;
        max-width: none;
    }
    .news-item__right {
        max-width: none;
    }
    .page-button {
        font-size: 1.6rem;
        width: 3rem;
        height: 3rem;
    }

    /* Search page */
    .search-bar__container {
        margin-top: 4rem;
    }
    .search-bar__button svg {
        display: block;
    }

    /* Day page */
    .calendar-links__wrapper {
        padding-left: 0;
        padding-right: 0;
    }
    .calendar-links--header {
        display: flex;
    }
    .categories {
        display: block;
        max-height: none;
    }
    .categories li {
        width: 100%;
    }
    .category {
        font-size: 1rem;
        margin-bottom: 1.2rem;
    }
    .category::before {
        content: none;
    }
    .search-bar__container--beige {
        margin-top: 0;
        max-width: none;
    }
    .other-activities {
        display: block;
    }
    .search-bar__container--white {
        margin-top: 1.5rem;
    }
    .other-activities__img {
        aspect-ratio: 2 / 1;
        max-width: 100%;
        width: 100%;
        object-fit: cover;
    }
    .other-activities__search {
        padding: 2rem;
    }
    .event-category__teasers .teaser__wrapper {
        max-width: none;
        width: 100%;
    }
    .random-events {
        display: none;
    }

    /* Detail page */
    .event-detail {
        display: none;
    }
    .event-detail--mobile {
        display: block;
    }
    .event-detail__left {
        width: 100%;
    }
    .event-detail__right {
        width: 100%;
    }
    .event-detail__content {
        padding: 3rem 0;
    }
    .event-detail__photo {
        padding: 0;
    }
    .event-detail__right .socials--event {
        padding-top: 2rem;
    }
    .event-info {
        display: block;
    }
    .google-maps img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }
}

@media (max-width: 22rem) {
    /* News page */
    .news-photo {
        aspect-ratio: 1 / 1;
    }
    .news__button {
        text-align: center;
    }

    /* Day page */
    .other-activities__search {
        padding: 1rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
════════════════════════════════════════ FOOTER ═════════════════════════════════════════
══════════════════════════════════════════════════════════════════════════════════════ */

.footer__inner {
    padding: 8rem 2.2rem 2rem;
    position: relative;
}

/* ---------------------------- Footer top / Newsletter ------------------------------ */

.footer--top {
    padding-bottom: 6rem;
    padding-top: 3rem;
    background-color: var(--beige);
}

/* Media */

.segment__inner--media {
    padding: 0;
}

.segment__content--media {
    max-width: none;
    padding-top: 0;
    padding-bottom: 0;
}

.segment__content--media div {
    margin-bottom: 2.2rem;
}

.segment__content--media a {
    display: inline-block;
    background-color: var(--red);
    font-size: 3.2rem;
    font-weight: 700;
    padding: 1rem 2rem;
    position: relative;
}

.segment__content--media a::before {
    content: '';
    display: block;
    position: absolute;
    background-image: url(../img/gentse-feesten-icoontjes/arrow-right-extra-long.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 8rem;
    height: 2.7rem;
    top: 32%;
}

.segment__content--media a span {
    background-color: var(--red);
    position: relative;
    z-index: 1;
    display: block;
}

.media__photos span {
    padding-right: 3rem;
}

.media__videos span {
    padding-left: 3rem;
}

a.media__photos {
    padding-right: 8rem;
    transition: 0.2s ease;
}

a.media__photos:hover {
    padding-right: 11rem;
    transition: 0.2s ease;
}

a.media__videos {
    padding-left: 8rem;
    transition: 0.2s ease;
}

a.media__videos:hover {
    padding-left: 11rem;
    transition: 0.2s ease;
}

.media__photos::before {
    right: 3rem;
}

.media__videos::before {
    transform: rotate(180deg);
    left: 3rem;
}

/* Newsletter */

.small-letters {
    display: block;
    font-size: 0.77rem;
    line-height: 1.4rem;
}

.small-letters::selection,
.small-link:hover {
    color: black;
}

.segment__content--newsletter {
    max-width: 50%;
    padding: 2rem;
    margin-top: 8rem;
    background-color: hsla(31, 49%, 81%, 0.9);
}

.small-link {
    color: var(--red);
    text-decoration: underline;
}

/* Newsletter form */

.newsletter-form__input {
    font-size: 1.2rem;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 2px solid black;
    padding: 0.7rem;
    margin: 1rem 0;
}

.newsletter-form__input:focus {
    outline-style: solid;
    outline-width: 2px;
    outline-color: black;
    outline-offset: 2px;
}


.newsletter-form__submit {
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.1rem;
    color: black;
    background-color: var(--red);
    padding: 1.2rem 2rem;
    border: 1px solid var(--red);
    transition: 0.3s ease;
    margin: 1.4rem 0; 
}

.newsletter-form__submit:hover {
    background-color: white;
    color: black;
    border: 1px solid black;
    transition: 0.3s ease;
}

/* ---------------------------------- Date sticker ------------------------------------ */

.duration--bottom {
    top: -6rem;
    transition: 0.3s ease;
}

/* ---------------------------------- Footer bottom ------------------------------------ */

.footer--bottom {
    background-color: black;
}

.footer--bottom a {
    display: block;
}

.footer--bottom a:focus {
    outline: 2px solid #fff;
    outline-offset: 0.4rem;
    z-index: 3;
}

.big-footer,
.small-footer {
    display: flex;
    justify-content: space-between;
}

.big-footer {
    gap: 1rem;
    padding-bottom: 4rem;
}

.small-footer {
    gap: 2rem;
}

/* Left side */

.hashtag {
    display: block;
    font-size: 3.8rem;
    line-height: 3.8rem;
    color: white;
    font-weight: 600;
    padding-top: 6rem;
}

.hashtag::selection {
    color: black;
}

.footer__nav {
    display: flex;
    gap: 1rem;
}

.small-letters--gray {
    color: hsl(0, 0%, 70%);
}

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

/* Right side */

.footer__right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.socials {
    display: flex;
    justify-content: flex-end;
    gap: 1.2rem;
}

.socials a {
    display: block;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: white;
    transition: 0.3s ease;
}

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

.socials img {
    padding: 0.5rem;
    width: 100%;
    margin: 0 auto;
}

.organizers {
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
}

.organizers a:hover {
    opacity: 85%;
}

/* -------------------------------- 📱 Footer queries ---------------------------------- */

@media (max-width: 80rem) {
    .segment__content--media a {
        font-size: 2.3rem;
    }
    .segment__content--media a::before {
        top: 26%;
    }
    .duration--bottom {
        top: -4rem;
    }
}

@media (max-width: 64rem) {
    .socials a {
        width: 2.8rem;
        height: 2.8rem;
        transition: 0.3s ease;
    }
    .socials img {
        padding: 0.4rem;
    }
}

@media (max-width: 48rem) {
    .segment__content--newsletter {
        max-width: none;
        background-color: var(--beige);
        padding: 2rem 1rem;
        margin-top: 6rem;
    }
    .segment__content--media {
        padding: 0 1rem;
    }
    .segment__content--media a {
        font-size: 1.6rem;
    }
    .segment__content--media a::before {
        top: 20%;
    }
    .newsletter-form__input {
        font-size: 1rem;
    }
    .duration--bottom{
        display: block;
        left: calc(50% - 75px);
        transition: 0.3s ease;
    }
    .footer__inner {
        padding: 8rem 1rem 2rem;
    }
    .big-footer {
        display: block;
    }
    .footer__left,
    .socials {
        padding-bottom: 3rem;
    }
    .hashtag {
        padding-top: 3rem;
        font-size: 2rem;
        line-height: 2rem;
    }
    .footer__right ul {
        justify-content: flex-start;
    }
    .small-footer {
        display: block;
    }
    .footer__nav {
        padding-bottom: 1.4rem;
    }
}</pre></body></html>