.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: 54px 24px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flx-events-block__item {
margin: 0;
transition: opacity 180ms ease, transform 180ms ease; display: flex;
flex-direction: column;
justify-content: center;
}
.flx-events-block__item:first-child { background: var(--events-white);
color: var(--events-black);
position: relative;
aspect-ratio: 1 / 1.28;
overflow-y: auto
}
.flx-events-block__date,
.flx-events-block__header {
color: var(--events-text);
font-family: "Libre Franklin", sans-serif;
font-weight: 800;
line-height: 1.08;
margin: 0;
text-transform: uppercase;
}
.flx-events-block__date {
font-size: 16px;
}
.flx-events-block__header {
font-size: 24px;
margin-bottom: 16px;
}
.flx-events-block__text { 
font-size: 16px;   
padding: 20px; overflow-y: auto; text-align: center;
}
.flx-events-block__text p {
font-size: 16px;
text-align: center;
}
.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-5,
.flx-events-block__item--pattern-7 {
margin-top: 0;
}
.flx-events-block__item--pattern-2,
.flx-events-block__item--pattern-4,
.flx-events-block__item--pattern-6,
.flx-events-block__item--pattern-8 {
margin-top: 98px;
}
.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: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: 54px 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__header {
font-size: 16px;
margin-bottom: 10px;
}   .flx-events-block__item,
.flx-events-block__item:nth-child(4n + 2),
.flx-events-block__item:nth-child(4n + 4) {
margin-top: 0;
}
.flx-events-block__item:nth-child(even) {
margin-top: 54px;
}
.flx-events-block__item:nth-child(n + 3) {
margin-top: 16px;
}
.flx-events-block__item:nth-child(2n + 4) {
margin-top: 70px;
}
.flx-events-block__text { 
font-size: 9px;   
}
.flx-events-block__text p {
font-size: 9px;
}
}