@import url('../components/sections/hero-small.css');
@import url('../components/cards/card-s.css');
@import url('../components/cards/card-m.css');
@import url('../components/cards/card-l.css');
@import url('../components/cards/card-xl.css');
@import url('../components/sections/info-section.css');
@import url('../components/sections/card-s-section.css');

/* Exhibitions */
.exhibitions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color-grey);
    padding-bottom: var(--padding-medium);
}

.exhibition-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--gap-medium);
    padding: var(--padding-medium);
}

.extra-exhibitions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--gap-medium);
    padding: var(--padding-medium);
}

/* Media queries */
/* Tablet 768px */
@media (min-width: 768px) {
    .card-m {
        max-width: calc(50% - (0.5 * var(--gap-medium)));
        height: 100%;
    }
}

/* Laptop 1024px */
@media (min-width: 1024px) {
    .extra-exhibitions {
        height: 610px;
    }

    .card-m__image {
        min-height: 350px;
    }

    .event-cards {
        flex-wrap: nowrap;
        max-width: 1024px;
    }

    .exhibition-cards {
        gap: var(--gap-large);
    }

    .extra-exhibitions {
        max-width: 1024px;
        padding: 0px;
    }
}