@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;600&display=swap');

nav.weekend {background: #281616;}
article.weekend {background: linear-gradient(180deg, #281616 5%, #471616);}

nav.candidates {background: transparent;}
@media screen and (max-width: 820px) {
    nav.candidates {background: #000000;}
}

article.candidates {background: linear-gradient(120deg, #281616, #471616);}
.candidateslist a {position: relative; border-radius: 0; container-type: inline-size;}
.candidateslist a::after {content: ""; background: transparent url('/public/img/2024/cand_border.svg') no-repeat; background-size: contain; width: 100%; height: 100%; position: absolute; top: 0;}
.candidateslist a > span {padding: 5% 5% 5% 6%; height: 109cqw;}
.candidateslist a > span > span {width: 100%; height: 100%; overflow: hidden;}
.candidateslist a strong {font-weight: 400; font-variant: small-caps; font-family: 'Antonio', 'Arial Narrow', sans-serif; font-size: 200%;}
@media screen and (max-width: 750px) {
    .candidateslist {flex-wrap: wrap;}
    .candidateslist a {flex-basis: 40%;}
}

.candidate .candidate_photo {position: relative; border-radius: 0; container-type: inline-size;}
.candidate .candidate_photo::after {content: ""; background: transparent url('/public/img/2024/cand_border.svg') no-repeat; background-size: contain; width: 100%; height: 100%; position: absolute; top: 0;}
.candidate .candidate_photo > span {padding: 5% 5% 5% 6%; height: 109cqw;}
.candidate .candidate_photo > span > span {width: 100%; height: 100%; overflow: hidden;}
.candidate .candidate_photo > span img {width: 100%; height: 100%; object-fit: cover;}
@media screen and (max-width: 600px) {
    .candidate {align-items: center;}
    .candidate .candidate_left {width: 80%;}
    .candidate h2 {display: block;}
}

.candidate h2 {font-family: 'Antonio', 'Arial Narrow', sans-serif; font-size: 250%;}
.candidate .candidate_text {background: transparent; color: #FFFFFF; padding: 0; font-style: normal;}
.candidate .candidate_text p {color: #FFFFFF;}

.walk img {float: right; margin-left: 10px; width: 40%}
@media screen and (max-width: 600px) {
    .walk img {float: initial; margin-bottom: 10px; margin-left: 0; width: 100%}
    .walk h3 {text-align: center;}
}