﻿:root {
    --space-margin-large: 100px;
    --space-margin-medium: 17px;
    --gap-small: 0.5rem;
    --bg-state-btn-hover: #ac0634; /* Dark Red / Maroon */
}

.center-Adv .row {
    width: auto;
    flex: 2 0 0%;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
}

.center-Adv {
    text-align: center;
    float: left;
    width: 50%;
    height: auto;
    margin-right: var(--space-margin-large);
}

.left-sideAdv {
    width: 20%;
    float: left;
    height: var(--height-left-adv);
    margin-right: var(--space-margin-large);
}

.right-sideAdv {
    float: right;
    width: 20%;
    height: auto;
}

.stateGridCell:hover {
    background-color: var(--bg-state-btn-hover);
}

a:hover {
    background-color: var(--bg-state-btn-hover) !important;
}

@media screen and (max-width: 600px) {
    .center-Adv {
        margin-right: var(--space-margin-medium) !important;
    }
}

@media screen and (max-width: 950px) {
    .center-Adv {
        margin-right: var(--space-margin-medium) !important;
    }
}

.main-contentAdv {
    justify-content: center !important;
}

.center-Adv {
    margin-right: 0;
    width: 100% !important;
}

body > #container {
    margin: 0 !important;
}

@media(max-width: 992px) {
    .container {
        max-width: 100% !important;
    }

    .center-Adv {
        margin-right: 0 !important;
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .center-Adv {
        width: 100%;
    }

    .main-contentAdv {
        width: 100% !important;
    }
}

.grid-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-small);
    height: 100%;
}

    .grid-section .stateGridCell {
        width: 100%;
    }

@media(max-width: 1200px) {
    .grid-section {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 768px) {
    .grid-section {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

.grid-section:has(> :only-child) {
    justify-items: center;
}

.grid-section > :only-child {
    grid-column: 1 / -1;
    width: 100%;
}

.grid-section:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
}

.grid-section:has(> :only-child) {
    grid-template-columns: 1fr;
    justify-items: center;
}

.grid-section .stateGridCell:empty {
    display: none;
}