.flx-events-block {
--events-black: #000000;
--events-white: #FFFFFF;
--events-red: #B4311B;
background: var(--events-black);
color: var(--events-white);
margin: 0;
overflow: hidden;
padding: 120px 0;
}
.flx-events-block__title {
color: var(--events-white);
font-family: "Libre Franklin", sans-serif;
font-size: 30px;
font-style: italic;
font-weight: 700;
line-height: 1;
margin: 0 0 36px 10px;
text-transform: uppercase;
}
.flx-events-block__toolbar {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin: 0 0 32px 10px;
}
.flx-events-block__filter {
appearance: none;
background: transparent;
border: 2px solid var(--events-white);
border-radius: 999px;
color: var(--events-white);
cursor: pointer;
font-family: "Libre Franklin", sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
min-width: 180px;
padding: 10px 28px;
text-align: center;
text-transform: uppercase;
transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.flx-events-block__filter.is-active {
background: var(--events-white);
color: var(--events-black);
}
@media (hover: hover) {
.flx-events-block__filter:hover,
.flx-events-block__filter:focus-visible {
background: var(--events-white);
color: var(--events-black);
}
}
.flx-events-block__filter:focus-visible {
outline: 3px solid var(--events-red);
outline-offset: 3px;
}
.flx-events-block__filter:active {
transform: translateY(1px);
}
.flx-events-block__grid {
align-items: start;
display: grid;
gap: 0 24px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flx-events-block__item {
margin: 0;
transition: opacity 180ms ease, transform 180ms ease;
}
.flx-events-block__item.is-hidden {
display: none;
}
.flx-events-block__item--pattern-1,
.flx-events-block__item--pattern-3,
.flx-events-block__item--pattern-6,
.flx-events-block__item--pattern-8 {
margin-top: 0;
}
.flx-events-block__item--pattern-2,
.flx-events-block__item--pattern-4,
.flx-events-block__item--pattern-5,
.flx-events-block__item--pattern-7 {
margin-top: 70px;
}
.flx-events-block__figure {
aspect-ratio: 1 / 1.28;
margin: 0;
overflow: hidden;
position: relative;
}
.flx-events-block__image,
.flx-events-block__image-placeholder {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.flx-events-block__image {
transition: transform 260ms ease;
}
.flx-events-block__image-placeholder {
background: #F5A5A8;
}
.flx-events-block__item--pattern-1 .flx-events-block__figure,
.flx-events-block__item--pattern-3 .flx-events-block__figure,
.flx-events-block__item--pattern-6 .flx-events-block__figure,
.flx-events-block__item--pattern-8 .flx-events-block__figure {
aspect-ratio: 0.72 / 1.28;
}
.flx-events-block__item--pattern-2 .flx-events-block__figure,
.flx-events-block__item--pattern-4 .flx-events-block__figure,
.flx-events-block__item--pattern-5 .flx-events-block__figure,
.flx-events-block__item--pattern-7 .flx-events-block__figure {
aspect-ratio: 1 / 1.25;
}
.flx-events-block__item:hover .flx-events-block__image {
transform: scale(1.035);
}
@media (min-width: 769px) {
.flx-events-block .container{
padding: 0 77px;
}
.flx-events-block__title {
font-size: 35px;
}
}
@media (min-width: 1280px) {
.flx-events-block__title {
font-size: 48px;
}
}
@media (min-width: 1460px) {
.flx-events-block__grid {
gap: 0 36px;
}
}
@media (max-width: 999px) {
.flx-events-block {
padding: 54px 0 58px;
}
.flx-events-block > .container {
max-width: none;
padding-left: 20px;
padding-right: 20px;
width: 100%;
}
.flx-events-block__title {
font-size: 21px;
font-weight: 800;
line-height: 1.05;
margin: 0 0 34px;
}
.flx-events-block__grid {
gap: 0 14px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flx-events-block__item,
.flx-events-block__item--pattern-1,
.flx-events-block__item--pattern-4,
.flx-events-block__item--pattern-5,
.flx-events-block__item--pattern-8 {
margin-top: 0;
}
.flx-events-block__item--pattern-2,
.flx-events-block__item--pattern-3,
.flx-events-block__item--pattern-6,
.flx-events-block__item--pattern-7  {
margin-top: 36px;
}
.flx-events-block__item--pattern-1 .flx-events-block__figure,
.flx-events-block__item--pattern-4 .flx-events-block__figure,
.flx-events-block__item--pattern-5 .flx-events-block__figure,
.flx-events-block__item--pattern-8 .flx-events-block__figure {
aspect-ratio: 0.72 / 1.28;
}
.flx-events-block__item--pattern-2 .flx-events-block__figure,
.flx-events-block__item--pattern-3 .flx-events-block__figure,
.flx-events-block__item--pattern-6 .flx-events-block__figure,
.flx-events-block__item--pattern-7 .flx-events-block__figure  {
aspect-ratio: 1 / 1.25;
}
}