section.regular {
    --font-menu: #0D6073;
    --heading: #0D6073;
    --tile-border: 1px solid #A6CAD1;
    --tile-back: #FFFFFF;
}

section.alternate {
    --font-menu: #0D6073;
    --heading: #FFFFFF;
    --tile-border: 1px solid #A6CAD1;
    --tile-back: #FFFFFF;
}

html[data-theme="dark"] section {
    --font-menu: #D8F8FF;
    --heading: #D8F8FF;;
    --tile-border: 1px solid #FFFFFF80;
    --tile-back: #FFFFFF26;
}

section {
    display: block;
    text-align: center;
    color: var(--font-menu);
}

h2 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 26px;
    margin: 25px 0 10px 0;
    color: var(--heading);
}

.row {
    display: flex;
}

.tile-wrapper {
    padding: 8px;
    height: 310px;
    box-sizing: border-box;
}

.tile-wrapper.tile-2 {
    flex: 0 0 50%;
}

.tile-wrapper.tile-3 {
    flex: 0 0 33.3333%;
}

section .tile {
    display: block;
    border: var(--tile-border);
    border-radius: 10px;
    padding: 0px !important;
    overflow: hidden;
    text-decoration: none;
    background-color: var(--tile-back);
    color: var(--font-menu);
    max-width: 486px !important;
    max-height: 294px !important;
    width: 100%;
    height: 100%;
}

.tile:hover {
    box-shadow: 0px 0px 8px;
}

.tile-img {
    height: 136px;
    background-size: cover;
    background-position: center;
}

.tile-img img {
    height: 100%;
    width: 100%;
}

.description-container {
    padding: 0 20px;
}

.description-container p {
    font-size: 15px;
}

.description-container p span {
    text-decoration: underline;
}

@media (max-width: 789px) {
    .row {
        flex-wrap: wrap;
        justify-content: center;
    }

    section .tile-wrapper { 
        max-width: 392px !important;
    }
    .tile-wrapper.tile-2, .tile-wrapper.tile-3 {
        flex: 1 1 auto !important;
        padding: 8px;
    }
}