/*
// Okay, maybe re-designing the website isn't the best idea right now.
*/

.section {
    grid: auto-flow dense 2fr;
    flex-wrap: wrap;
    margin-left: 5vw;
    margin-right: 5vw;
    /* background-color: var(--foundation_shade); */
}

.section h3 {
    color: var(--title_col)
}

.subsec {
    flex: 1 1 384px;
    max-width: 512px;
    width: max-content;
    min-width: 384px;
}

.box_wrapper.services {
    margin-left: 5vw;
    margin-right: 5vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 8px;
    margin-bottom: 64px;
}

.services .box {
    /*
    // Reverse the hi/lo and make it an outset when they can be used!
    */
    --hi: oklch(0.25 0 0);
    --lo: oklch(0.45 0 0);
    border-style: solid;
    border-width: 3px;
    border-radius: 6px;
    border-left-color: var(--hi);
    border-right-color: var(--lo);
    border-top-color: var(--hi);
    border-bottom-color: var(--lo);
    box-shadow: inset 16px 16px 32px oklch(0 0 0 / 0.1),
        inset -16px -16px 32px oklch(1 0 0 / 0.025);

    text-align: center;
    font-weight: bold;
    color: var(--text_col);
    background-color: var(--foundation_shade);
    align-content: center;

    flex: 1 1 256px;
    max-width: 512px;
    min-width: 256px;
    width: max-content;

    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 8px;
    padding-right: 8px;
    transition: 100ms ease-out box-shadow, 100ms ease-out color;
}

.services .box:hover {
    color: white;
    box-shadow: inset 0 0 64px oklch(1 0 0 / 0.3),
        inset 0 0 16px oklch(1 0 0 / 0.6);
}

/* .services .box:hover { */
/*     box-shadow: inset 16px 16px 32px oklch(0 0 0 / 0.3), */
/*         inset -16px -16px 32px oklch(1 0 0 / 0.1); */
/* } */