:root {
--neutral-50: #fff;
--neutral-100: #FBF7F4;
--neutral-300: #B3B3B3;
--neutral-500: #808080;
--neutral-800: #282725;
}
body.post-type-archive-level,
body.single-level,
body.tax-activity-types {
background-color: var(--neutral-100);
#et-boc .et-l .et_pb_section,
.et_pb_fullwidth_menu_0_tb_header.et_pb_fullwidth_menu,
#main-content {
background-color: transparent !important;
}
#main-content .et-l .et_pb_row {
max-width: 1528px;
}
}
.rectangular-image {
width: 100%;
height: 0;
padding-top: 60%;
position: relative;
overflow: hidden;
img,
video {
position: absolute;
width: 100%;
height: 100%;
inset: 0;
object-fit: cover;
object-position: center;
}
}
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}.levels-archive {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 40px 16px;
.level-card {
width: 100%;
border-radius: 87px 0 30px 0;
background: var(--neutral-50);
box-shadow: 1px 3px 11.4px 2px rgba(130, 130, 130, 0.17);
.level-card__image {
padding-top: 96%;
border-radius: 0 0 70px 0;
}
.level-card__content {
padding: 15px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.level-card__readmore {
color: var(--neutral-300);
font-weight: bold;
letter-spacing: 1px;
font-size: 18px;
}
.level-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
border-radius: 50%;
border: 1px solid var(--neutral-800);
color: var(--neutral-800);
transition: 0.5s;
}
a:is(:hover, :focus-visible) {
.level-card__icon {
color: var(--neutral-50);
background: var(--neutral-800);
}
}
}
}
.levels-archive__banner {
position: relative;
}
.levels-archive__logo {
position: relative !important;
left: 50%;
transform: translateX(-50%) translateY(-10%);
max-width: 100px;
}
.levels-archive__header {
text-align: center;
margin-bottom: 50px;
h2 {
color: var(--neutral-800);
text-transform: uppercase;
font-weight: bold;
font-size: 1.5rem;
padding: 0;
}
p {
margin-top: 14px;
color: var(--neutral-500);
}
}
@media only screen and (min-width: 576px) {
.levels-archive {
.level-card {
width: calc(50% - 8px);
}
}
}
@media only screen and (min-width: 769px) {
.levels-archive {
gap: 40px 30px;
.level-card {
width: calc(50% - 15px);
}
}
.levels-archive__header {
h2 {
font-size: 2.15rem;
}
}
.levels-archive__logo {
transform: translateX(-50%) translateY(-20%);
max-width: 150px;
}
}
@media only screen and (min-width: 992px) {
.levels-archive {
gap: 40px 16px;
.level-card {
width: calc(33% - 9px);
}
}
}
@media only screen and (min-width: 1201px) {
.levels-archive {
gap: 40px 30px;
.level-card {
width: calc(33% - 17px);
}
}
.levels-archive__logo {
position: absolute !important;
transform: translateX(-50%) translateY(-70%);
}
}
@media only screen and (min-width: 1441px) {
.levels-archive {
gap: 40px 16px;
.level-card {
width: calc(25% - 12px);
}
}
.levels-archive__logo {
transform: translateX(-50%) translateY(-100%);
max-width: 200px;
}
}.video-grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 40px 16px;
max-width: 1138px;
margin-inline: auto;
.video-card {
width: 100%;
border-radius: 0 0 30px 30px;
background: var(--neutral-50);
box-shadow: 1px 3px 11.4px 2px rgba(130, 130, 130, 0.17);
.video-card__image {
padding-top: 178%;
}
.video-card__button {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
cursor: pointer;
background: var(--neutral-50);
color: var(--neutral-800);
font-size: 24px;
border: 0;
border-radius: 50%;
width: 69px;
height: 69px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: 0.5s;
}
.video-card__button:is(:hover, :focus-visible) {
color: var(--neutral-50);
background: var(--neutral-800);
}
.video-card__content {
padding: 20px 15px;
text-align: center;
h3 {
padding: 0;
color: var(--neutral-300);
font-weight: bold;
letter-spacing: 1px;
font-size: 18px;
}
}
}
}
@media only screen and (min-width: 576px) {
.video-grid {
.video-card {
width: calc(50% - 8px);
}
}
}
@media only screen and (min-width: 769px) {
.video-grid {
gap: 40px 30px;
.video-card {
width: calc(50% - 15px);
}
}
}
@media only screen and (min-width: 992px) {
.video-grid {
gap: 40px 16px;
.video-card {
width: calc(33% - 9px);
}
}
}
@media only screen and (min-width: 1201px) {
.video-grid {
gap: 40px 30px;
.video-card {
width: calc(33% - 17px);
}
}
}