.fc_banner {
padding-top: clamp(100px, 30vw, 340px);
padding-bottom: clamp(30px, 7vw, 70px);
background: center / cover no-repeat;
display: flex;
flex-wrap: wrap;
align-content: space-between;
gap: 60px;
justify-content: center;
min-height: calc(100vh);
box-sizing: border-box;
position: relative;
isolation: isolate;
}
.fc_banner.small_banner {
padding-top: clamp(100px, 20vw, 240px);
min-height: min(35vw, 700px);
}
.fc_banner.two_column_banner {
justify-content: space-between;
}
.fc_banner.firstElementPadding {
min-height: calc(100vh - 198px);
}
.fc_banner:before {
content: '';
background: linear-gradient(180deg, rgba(0, 17, 55, 0.20) 0%, rgba(0, 17, 55, 0.00) 14.22%), linear-gradient(180deg, rgba(0, 17, 55, 0.10) 0%, rgba(0, 17, 55, 0.50) 75%, rgba(0, 17, 55, 0.80) 100%), 50% / cover no-repeat;
width: 100%;
height: 100%;
inset: 0;
position: absolute;
z-index: -1;
}
.fc_banner .banner_accreditations {
flex-basis: 100%;
}
.fc_banner .wp_content {
width: 100%;
}
@media (max-width: 640px) {
.fc_banner.small_banner {
min-height: min(65vw, 700px);
}
}.single_post_list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.archive_filter {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--white-smoke);
width: fit-content;
margin: 0 auto 60px;
padding: var(--gap-m) var(--gap-l);
border-radius: 5px;
}
.archive_filter .filter-toggle h5 {
font-weight: 800;
color: var(--tertiary);
}
.archive_filter ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 10px;
}
.archive_filter ul li {
padding-block: 20px;
}
.archive_filter ul li a {
color: var(--tertiary);
background: var(--white);
font-weight: 800;
padding: 20px 30px;
border-radius: 15px 5px;
}
.archive_filter ul li a:hover {
color: var(--secondary);
background: var(--white);
}
.archive_filter ul li.current a {
color: var(--white);
background: var(--tertiary);
}
@media (max-width: 1400px) {
.archive_filter {
flex-direction: column;
}
.archive_filter ul {
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-width: 1024px) {
.single_post_list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.single_post_list {
grid-template-columns: 1fr;
}
}
@media (max-width: 450px) {
.archive_filter ul li {
min-width: 100%;
padding-block: 0;
}
.archive_filter ul li a {
width: 100%;
display: block;
box-sizing: border-box;
text-align: center;
}
}