:root {
    --ls: 360px;
    --lsm: 240px;
    --lso: 40px;
}
.site-header {
    position: absolute;
    top: 0;
    width: 100%;
}
.hero-banner {
    padding-top: calc(var(--lsm) - var(--lso));
    min-height: 70vh;
    background-image: url(hero-bg.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: contain;
}

fieldset.form-field {
    border: none;
    padding: 0;
    margin: 0;
}

.form-field__radio-option {
    --_state: var(--input-normal, #333);
    --_focus: var(--input-focus);
    --_outline: var(--input-outline);
    display: block;
    background: #fff;
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--_state);
    box-shadow: inset var(--_state) 0px 0px 0px 1px;
    border-radius: var(--input-radius);
    margin-bottom: var(--form-spacing, 12px);
}
.form-field__radio-option.form-field__radio-option--selected {
    --_state: var(--_focus);
    outline: none;
    box-shadow: inset var(--_state) 0px 0px 0px 1px, 0 0 1px 2px var(--_outline);
}
.form-field__radio-option .form-field__container {
    display: none;
}

.form-field__radio-option input[type="radio"]:checked ~ .form-field__container,
.form-field__radio-option--selected .form-field__container {
    display: block;
}

.card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card header img {
    height: 200px;
    width: 100%;
    object-fit: cover;
}
.card main {
    
}
.card footer {
    padding-top: 10px;
    margin-top: auto;
}
.card footer::before {
    content: "";
    display: block;
    height: 10px;
    border-top: 1px solid silver;
}
.brand {
    height: var(--lsm);
}
.hero-left h2, .reg-form h2 {
    color: #d5216e;
    font-size: 2.5rem;
    text-shadow: 2px 2px #fff;
}
.reg-form h3 {
    color: #27c6a8;
}
.hero-left p {
    text-shadow: 1px 1px #fff;
}
.hero-right {
    background: rgba(255, 255, 255, .3);
    backdrop-filter: blur(6px);
    padding: 1rem;
    border-radius: 1rem;
}
.skewed-one h2 {
    color: #f17676;
    text-shadow: 2px 2px #fff;
}
.skewed-two h2 {
    color: #6cddc8;
    text-shadow: 2px 2px #fff;
}
#partners {
    padding-bottom: 1em;
}
.sponsor-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}
.sponsor-logos a {
    display: inline-block;
    flex: 1 1 45%;
    text-align: center;
}
.sponsor-logos a > img {
    height: 140px;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
    width: auto;
    object-fit: contain;
}

.sponsor-logos a:hover > img,
.sponsor-logos a:focus > img {
      filter: grayscale(0%);
}
@media screen and (min-width: 768px) {
    #partners {
    padding-bottom: 2.5em;
}
.sponsor-logos a {
    flex: 1 1 20%;
}
    .brand {
        height: var(--ls);
    }
    .hero-banner {
        padding-top: calc(var(--ls) - var(--lso));
    }
}