/*
Theme Name: Oliver's Portfolio Theme
*/


/* --------------------------------------------------------------
Load Font Faces
--------------------------------------------------------------*/
/* Compagnon */
@font-face {
    font-family: 'Compagnon';
    src: url('assets/fonts/Compagnon-Bold.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Compagnon';
    src: url('assets/fonts/Compagnon-Medium.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Compagnon';
    src: url('assets/fonts/Compagnon-Roman.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* covik-sans, obviously-narrow, swear-text are linked as
   an Adobe Fonts project, so the seperate stylesheet is 
   linked in the theme's functions.php file*/

/* --------------------------------------------------------------
Root Styles 
Color and Font Family Styles
--------------------------------------------------------------*/
:root {
    /* Colors */
    --clr-black: #141414;
    --clr-lightGrey: #D9D9D9;
    --clr-lightGrey-10: #D9D9D910;
    --clr-darkGrey: #555555;
    --clr-darkGrey-10: #55555510;
    --clr-darkGrey-50: #55555550;

    /* Font families */
    --ff-primary: "covik-sans", sans-serif;
    --ff-secondary: "obviously-narrow", sans-serif;
    --ff-tertiary: "Compagnon", monospace, serif;

    --ff-text: "swear-text", serif;

    /* Font Weights */
    --fw-bold: 600;
    --fw-medium: 500;
    --fw-roman: 400;

    /*Font Sizes
      - responsive added below in media query */
    --fs-display-l: 4rem;
    --fs-display: 2.8125rem;

    --fs-heading-l: 3.125rem;
    --fs-heading: 2.1875rem;

    --fs-subhead-l: 1.5625rem;
    --fs-subhead: 1.4375rem;

    --fs-text-l: 1.125rem;
    --fs-text: 1rem;

    --fs-note-l: 0.875rem;
    --fs-note: 0.8125rem;

    --fs-tag-l: 0.8125rem;
    --fs-tag: 0.75rem;

    --fs-nav: 1.375rem;
    --fs-nav-l: 1.375rem;

    --fs-mobileBar: 0.975rem;

    /* Spacing Sizes */
    --space-000: 0rem;
    --space-025: .25rem;
    --space-050: .5rem;
    --space-100: .75rem;
    --space-200: .8725rem;
    --space-300: 1rem;
    --space-400: 1.25rem;
    --space-500: 1.5rem;
    --space-600: 2rem;
    --space-700: 3rem;
    --space-800: 4rem;

    --grid-cell-padding-x: var(--space-300);
    --grid-cell-padding-y: var(--space-300);

    /* Logo Sizing */
    --logo-height: 21px;
    --logo-height-l: 22.3077px;

    /* Transitions */
    --offcanvas-transition: transform 0.3s ease-in-out;
    --drawer-transition-duration: 0.3s;
    --drawer-transition-timing-function: ease-in-out;
    --drawer-transition-property: transform, margin-left;

}

/* Make logo sizing responsive */
@media (min-width: 1200px) {
    :root {
        --logo-height: var(--logo-height-l);
    }
}

/* Make type responsive */
@media (min-width: 1200px) {
    :root {
        --fs-display: var(--fs-display-l);
        --fs-heading: var(--fs-heading-l);
        --fs-subhead: var(--fs-subhead-l);
        --fs-text: var(--fs-text-l);
        --fs-note: var(--fs-note-l);
        --fs-tag: var(--fs-tag-l);
        --fs-nav: var(--fs-nav-l);
    }
}

/*--------------------------------------------------------------
Normalize
Styles based on Andy Bell's Modern CSS Reset @link https://piccalil.li/blog/a-modern-css-reset
--------------------------------------------------------------*/

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margin */
* {
    margin: 0;
    padding: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}

html,
body {
    height: 100%;
}

/* Set core body defaults */
body {
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*--------------------------------------------------------------
Utility Classes
--------------------------------------------------------------*/
.material-symbols-rounded {
    font-variation-settings:
        'FILL' 1,
        'wght' 500,
        'GRAD' 200,
        'opsz' 24
}

.visually-hidden {
    position: absolute;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Colors */
.text-primary-clr {
    color: var(--clr-black);
}

.text-secondary-clr {
    color: var(--clr-darkGrey);
}

.text-inverse-clr {
    color: var(--clr-lightGrey);
}

/* Backgound Colors */

.bg-light {
    background-color: var(--clr-lightGrey);
}

.bg-dark {
    background-color: var(--clr-black);
}

.bg-accent {
    background-color: var(--clr-darkGrey);
}

.bg-white {
    background-color: #fff;
}

/* Font Weights */
.fw-bold {
    font-weight: var(--fw-bold);
}

.fw-medium {
    font-weight: var(--fw-medium);
}

.fw-roman {
    font-weight: var(--fw-roman);
}

/* Font Sizes */
.fs-display {
    font-size: var(--fs-display);
    line-height: 1.075;
    letter-spacing: -0.03em;
}

.fs-heading {
    font-size: var(--fs-heading);
    line-height: 1.075;
    letter-spacing: -0.03em;
}

.fs-subhead {
    font-size: var(--fs-subhead);
    line-height: 1.075;
    letter-spacing: -0.02em;
}

.fs-text {
    font-size: var(--fs-text);
}

.fs-note {
    font-size: var(--fs-note);
}

.fs-tag {
    font-size: var(--fs-tag);
}

.fs-nav {
    font-size: var(--fs-nav);
}

.fs-mobileBar {
    font-size: var(--fs-mobileBar);
}

/* Font Families */
.ff-primary {
    font-family: var(--ff-primary);
}

.ff-secondary {
    font-family: var(--ff-secondary);
}

.ff-tertiary {
    font-family: var(--ff-tertiary);
}

.ff-text {
    font-family: var(--ff-text);
}

/* Text Styling */
.uppercase {
    text-transform: uppercase;
}

/* Borders */
.border-regular {
    border-width: 1px;
}

.border-bold {
    border-width: 2px;
}

[class*="border-top"] {
    border-top-style: solid;
    border-top-color: var(--clr-black);
}

[class*="border-bottom"] {
    border-bottom-style: solid;
    border-bottom-color: var(--clr-black);
}

[class*="border-right"] {
    border-right-style: solid;
    border-right-color: var(--clr-black);
}

[class*="border-left"] {
    border-left-style: solid;
    border-left-color: var(--clr-black);
}

@media (width < 992px) {
    .border-top-m {
        border-top-style: none;
    }

    .border-bottom-m {
        border-bottom-style: none;
    }

    .border-right-m {
        border-right-style: none;
    }

    .border-left-m {
        border-left-style: none;
    }
}

@media (width < 768px) {
    .border-top-s {
        border-top-style: none;
    }

    .border-bottom-s {
        border-bottom-style: none;
    }

    .border-right-s {
        border-right-style: none;
    }

    .border-left-s {
        border-left-style: none;
    }
}

@media (width < 576px) {
    .border-top-xs {
        border-top-style: none;
    }

    .border-bottom-xs {
        border-bottom-style: none;
    }

    .border-right-xs {
        border-right-style: none;
    }

    .border-left-xs {
        border-left-style: none;
    }

}

@media (width < 414px) {
    .border-top-xxs {
        border-top-style: none;
    }

    .border-bottom-xxs {
        border-bottom-style: none;
    }

    .border-right-xxs {
        border-right-style: none;
    }

    .border-left-xxs {
        border-left-style: none;
    }

}

/* Spacing */
.space-block-end-700 {
    padding-block-end: var(--space-700);
}

.space-block-end-600 {
    padding-block-end: var(--space-600);
}

.space-block-end-500 {
    padding-block-end: var(--space-500);
}

.space-block-end-400 {
    padding-block-end: var(--space-400);
}

.space-block-end-300 {
    padding-block-end: var(--space-300);
}

.space-block-end-200 {
    padding-block-end: var(--space-200);
}

.space-block-end-100 {
    padding-block-end: var(--space-100);
}

.space-block-end-050 {
    padding-block-end: var(--space-050);
}

.space-block-end-025 {
    padding-block-end: var(--space-025);
}

.margin-top-500 {
    margin-block-start: var(--space-500);
}

.margin-top-400 {
    margin-block-start: var(--space-400);
}

.margin-top-300 {
    margin-block-start: var(--space-300);
}

/*--------------------------------------------------------------
General Styling
--------------------------------------------------------------*/
body {
    font-family: var(--ff-text);
    color: var(--clr-black);
    background-color: var(--clr-lightGrey);
}

img {
    font-family: var(--ff-tertiary);
    font-weight: var(--fw-roman);
}

a {
    color: var(--clr-black);
    text-decoration: underline dotted .1em;
    text-underline-offset: .1em;
}

a:hover {
    color: var(--clr-darkGrey);
    text-decoration: underline solid .0625em;
}

.grid-cell {
    padding-inline: var(--grid-cell-padding-x);
    padding-block: var(--grid-cell-padding-y);
}

.fill-grid-cell-inline {
    margin-inline: calc(-1 * var(--grid-cell-padding-x));
}

.fill-grid-cell-block {
    margin-block: calc(-1 * var(--grid-cell-padding-y));
}

.fill-grid-cell-block-start {
    margin-block-start: calc(-1 * var(--grid-cell-padding-y));
}

.fill-grid-cell-block-end {
    margin-block-end: calc(-1 * var(--grid-cell-padding-y));
}

.section-title-cell {
    padding-inline: var(--grid-cell-padding-x);
    padding-block-start: var(--grid-cell-padding-y);
    padding-block-end: var(--space-050);
}

.oh-logo {
    margin: var(--space-300);
    height: var(--logo-height);
}

.four-by-three {
    aspect-ratio: 4/3;
    overflow: hidden;
    display: block;
}

.four-by-three img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list-style-position-inside {
    list-style-position: inside;
}

/* Popout Grid */
.popout-grid {
    --padding-inline: var(--grid-cell-padding-x);
    --content-max-width: 65ch;
    --popout-max-width: 75ch;
    /* how much the popouts "overhang" out from the normal content */
    --popout-difference: calc((var(--popout-max-width) - var(--content-max-width)) / 2);

    display: grid;
    padding-bottom: var(--space-600);
    row-gap: var(--space-400);

    grid-template-columns: [full-start] minmax(var(--padding-inline), 1fr) [popout-start] minmax(0, var(--popout-difference)) [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width)) [content-end] minmax(0, var(--popout-difference)) [popout-end] minmax(var(--padding-inline), 1fr) [full-end];

}

.popout-grid>*:not(.popout),
.popout-grid>*:not(.full) {
    grid-column: content;
}

.popout-grid>.popout {
    grid-column: popout;
}

.popout-grid>.full {
    grid-column: full;
}

/* Figure with Caption Styling */
figure.image>figcaption {
    font-family: var(--ff-primary);
    /* font-weight: var(--fw-roman); */
    font-size: var(--fs-tag);
    color: var(--clr-darkGrey);

    padding-block-start: var(--space-025);
}

/*--------------------------------------------------------------
Layout Grid
--------------------------------------------------------------*/
.layout-grid {
    min-height: 100svh;
    display: grid;
    grid-template-areas: "mobile-nav"
        "content";
    gap: 0rem
}

.layout-grid-nav {
    grid-area: nav;
    display: flex;
    flex-direction: column;
}

.layout-grid-content {
    grid-area: content;
    min-height: 100svh;
}

@media (min-width: 992px) {
    .layout-grid {
        background-color: var(--clr-lightGrey);
        display: grid;
        grid-template-areas: "nav content content content content content";
        grid-template-columns: auto repeat(5, 1fr);
        gap: 0rem;
    }

    .layout-grid-nav {
        max-height: 100svh;
        position: sticky;
        top: 0;
    }

    .layout-grid-content {
        border-top-style: none;
    }
}

/*-------------------------------------------------------------- 
Buttons 
--------------------------------------------------------------*/
.btn {
    --padding-y: .5em;
    --padding-x: 1em;
    --padding-big: 10em;

    cursor: pointer;
    text-decoration: none;
    text-align: center;

    border-radius: .50em;
    border-style: solid;
    border-width: 1px;

    padding-inline: var(--padding-x);
    padding-block: var(--padding-y);

    &:hover,
    &:focus-within {
        text-decoration: none;
    }
}

.btn.primary {
    background-color: var(--clr-lightGrey);
    color: var(--clr-black);
    border-color: var(--clr-black);

    &:hover,
    &:focus-within {
        background-color: var(--clr-black);
        color: var(--clr-lightGrey);
    }
}

.btn.inverse {
    background-color: var(--clr-black);
    color: var(--clr-lightGrey);
    border-color: var(--clr-lightGrey);

    &:hover,
    &:focus-within {
        background-color: var(--clr-lightGrey);
        color: var(--clr-black);
    }
}

/*--------------------------------------------------------------
Navbar
--------------------------------------------------------------*/
/* Mobile Navbar */
.mobile-header-nav-wrapper {
    position: sticky;
    top: 0px;
    width: max-content;
    grid-area: mobile-nav;
    z-index: 210;
}

@media (min-width: 992px) {
    .mobile-header-nav-wrapper {
        display: none;
    }
}

.mobile-navbar {
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;

    background-color: var(--clr-lightGrey);
}

.mobile-navbar>button {
    border-radius: unset;
    border-block: none;
    border-inline-start: none;
    border-inline-end: solid 1px;
}

.mobile-navbar>div:nth-child(2) {
    display: inherit;
    flex-grow: 1;

    justify-content: space-evenly;
    align-items: center;
}

/* Front Page Nav */
.nav-list-wrapper {
    flex-grow: 1;
}

.nav-list {
    display: grid;
    gap: 1rem;
    list-style: none;
}

.nav-list li:hover {
    font-weight: var(--fw-bold);
}

.nav-list li.current-menu-item {
    font-weight: var(--fw-bold);
}

.nav-list li a {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.nav-list li a .nav-icon {
    padding-right: .3em;
}

/* Reduced Navbar */

.reduced .nav-wrapper li a {
    font-size: var(--fs-text);
}

.reduced .nav-list li a {
    flex-direction: column;
    align-items: start;
}

.reduced .nav-list li a .nav-icon {
    padding-right: 0px;
}

/*--------------------------------------------------------------
Offcanvas Navigation
--------------------------------------------------------------*/
.offcanvas-toggler {}

.offcanvas-header {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.offcanvas {
    --offcanvas-z-index: 310;
    max-width: 100vw;
    transition: var(--offcanvas-transition);
    z-index: var(--offcanvas-z-index);
}

.offcanvas.offcanvas-start {
    background-color: var(--clr-lightGrey);
    max-width: 100vw;
}

.offcanvas.show,
.offcanvas.offcanvas-start.show {
    transform: none;
    visibility: visible;
}

.offcanvas.hiding,
.offcanvas.offcanvas-start.hiding {
    visibility: visible;
}

.offcanvas-backdrop {
    position: absolute;
    left: 100%;
    height: 900vh;
    width: 100vw;
    z-index: calc(var(--offcanvas-z-index) - 10);

    background-color: var(--clr-darkGrey-50);
    opacity: 0;

    transition: opacity .3s ease-in-out;
}

.offcanvas-backdrop.show {
    opacity: 1;
}

.offcanvas-backdrop.fade {
    opacity: 0;
}

@media (max-width: 991.98px) {
    .offcanvas {
        position: fixed;
        bottom: 0;
    }

    .offcanvas.offcanvas-start {
        z-index: var(--offcanvas-z-index);
        top: 0px;
        left: 0px;
        visibility: hidden;
        transform: translateX(-100.1%);
    }

}

.offcanvas-close.btn {
    /* reset some styles from .btn */
    background-color: transparent;
    border-radius: 0;
    border: none;
    position: relative;
    padding: 0px;

    /* changes to fit in offcanvas header */
    height: 100%;
    width: calc(var(--logo-height) + var(--space-300) * 2);
}

.offcanvas-close.btn:hover,
.offcanvas-close.btn:focus-within {
    background-color: var(--clr-darkGrey-10);
    color: var(--clr-darkGrey);
}

@media (min-width: 992px) {
    .offcanvas-close.btn {
        display: none;
    }
}

.offcanvas-close.btn span.material-symbols-rounded {
    --icon-size: calc(var(--logo-height) + var(--space-400));

    position: absolute;
    font-variation-settings:
        'wght' 300;
    font-size: var(--icon-size);
    top: calc(50% - var(--icon-size) / 2);
    left: calc(50% - var(--icon-size) / 2);
}

/*--------------------------------------------------------------
Front Page
--------------------------------------------------------------*/
.front-page-landing {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(12, 1fr);
    gap: 0rem;
}

.front-page-landing>.landing-intro {
    grid-column: -13 / -1;
}

.front-page-landing>.landing-intro>.details {
    display: block
}

.front-page-landing>.landing-intro>.details>.more-about-me {
    border-bottom: 1px solid var(--clr-black);
}

.front-page-landing>.landing-personal {
    grid-column: -13 / -1;

    border-top: 2px solid var(--clr-black);
    display: flex;
    flex-direction: column;
}

.front-page-landing>.landing-personal :nth-child(1) {
    flex-grow: 1;
}

@media (min-width: 414px) {
    .front-page-landing>.landing-intro>.details {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .front-page-landing>.landing-intro>.details>.more-about-me {
        grid-row: span 2;
        border-bottom: none;
    }
}

@media (min-width: 768px) {
    .front-page-landing>.landing-intro {
        grid-column: -13 / -6;
    }

    .front-page-landing>.landing-personal {
        grid-column: -6 / -1;
        border-top: none;
    }
}

/*-------------------------------------------------------------- 
About Page
--------------------------------------------------------------*/
.about-page-landing {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(12, 1fr);
    gap: 0rem;
}

.about-page-landing>.landing-intro {
    grid-column: -13 / -1;
    border-top: 2px solid var(--clr-black);
}

.about-page-landing>.landing-intro>.details {
    display: block;
}

.about-page-landing>.landing-intro>.details>:not(:last-child){
    border-bottom: 1px solid var(--clr-black);
}

.about-page-landing>.landing-personal {
    grid-column: -13 / -1;

    display: flex;
    flex-direction: column;
    position: relative;
}

@media (min-width: 414px) {
    .about-page-landing>.landing-intro>.details {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .about-page-landing>.landing-intro>.details>:not(:last-child){
        border-bottom: none;
    }
}

@media (min-width: 768px) {
    .about-page-landing>.landing-intro {
        grid-column: -10 / -1;
        border-top: none;
    }

    .about-page-landing>.landing-personal {
        grid-column: -13 / -10;
    }
}

/*-------------------------------------------------------------- 
Work Tags
--------------------------------------------------------------*/
.work-tag-wrapper {
    display: flex;
    gap: .5rem;
}

.work-tag-wrapper .work-tag {
    --padding-y: .4em;
    --padding-x: .75em;
    background-color: inherit;
    padding-block-end: .5em;
}

/*-------------------------------------------------------------- 
Posts 3 Column Grid
--------------------------------------------------------------*/
.multiple-posts-grid {
    --columns: 1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0rem;
}

.multiple-posts-grid>.grid-cell {
    display: block;
    grid-column: span calc(12 / var(--columns));

    border-bottom: 1px solid var(--clr-black);

    &:hover,
    &:focus-within {
        background-color: var(--clr-darkGrey-10);
    }
}

.multiple-posts-grid>.grid-cell:last-child {
    border-block-end: none;
}

.multiple-posts-grid header a {
    text-decoration: none;
}

@media (width > 576px) and (width < 768px) {
    .multiple-posts-grid>.grid-cell {
        --columns: 2;
        border-inline-end: 1px solid var(--clr-black);
    }

    .multiple-posts-grid>.grid-cell:nth-child(2n) {
        border-inline-end: none;
    }

    .multiple-posts-grid>.grid-cell:nth-child(2n + 1):nth-last-child(-n + 2),
    .multiple-posts-grid>.grid-cell:nth-child(2n + 1):nth-last-child(-n + 2)~.grid-cell {
        border-block-end: none;
    }
}


@media (width >=768px) {
    .multiple-posts-grid>.grid-cell {
        --columns: 3;
        border-inline-end: 1px solid var(--clr-black);
    }

    .multiple-posts-grid>.grid-cell:nth-child(3n) {
        border-inline-end: none;
    }

    .multiple-posts-grid>.grid-cell:nth-child(3n + 1):nth-last-child(-n + 3),
    .multiple-posts-grid>.grid-cell:nth-child(3n + 1):nth-last-child(-n + 3)~.grid-cell {
        border-block-end: none;
    }
}

/*-------------------------------------------------------------- 
Single Work Layout
--------------------------------------------------------------*/
.single-work .layout-grid>.layout-grid-content {
    display: grid;
    grid-template-areas: "header main main"
        "header footer footer";
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 767.98px) {
    .single-work .layout-grid>.layout-grid-content {
        grid-template-areas: "header"
            "main"
            "footer";
        grid-template-columns: auto;
    }

    .single-work .layout-grid>.layout-grid-content>header {
        border-bottom: solid;
        border-width: 2px;
    }
}

.single-work .layout-grid>.layout-grid-content>main {
    grid-area: main;
}

.single-work .layout-grid>.layout-grid-content>main :last-child {
    border-bottom: none;
}

.single-work .layout-grid>.layout-grid-content>header {
    grid-area: header;
}

@media (min-width: 768px) {
    .single-work .layout-grid>.layout-grid-content>header {
        grid-area: header;
        position: sticky;
        top: calc(var(--logo-height) + var(--grid-cell-padding-y) * 2);
        height: 100svh;
        overflow-y: scroll;
        overscroll-behavior: contain;
        padding-bottom: calc(var(--logo-height) + var(--grid-cell-padding-y) * 2 + var(--space-700));
    }

    .single-work .layout-grid>.layout-grid-content>main,
    .single-work .layout-grid>.layout-grid-content>footer {
        border-left: solid 2px var(--clr-black);
    }
}

@media (min-width: 992px) {
    .single-work .layout-grid>.layout-grid-content>header {
        top: 0px;
        height: 100svh;
        padding-bottom: 0;
    }
}

.single-work .layout-grid>.layout-grid-content>footer {
    grid-area: footer;
}

.contents-list {
    list-style: disc;
    list-style-position: inside;
}

/*--------------------------------------------------------------
Work Overview Drawer
--------------------------------------------------------------*/
.overview-drawer {
    --drawer-z-index: 110;
    --drawer-width: 400px;
    z-index: var(--drawer-z-index);
    transition-property: var(--drawer-transition-property);
    transition-duration: var(--drawer-transition-duration);
    transition-timing-function: var(--drawer-transition-timing-function);
    width: var(--drawer-width);
}

.overview-drawer.drawer-start {
    z-index: var(--drawer-z-index);
    top: 0px;
    left: 0px;
    margin-left: calc(-1 * var(--drawer-width));
    visibility: hidden;
    transform: translateX(-100.1%);
}

.overview-drawer.drawer-start.show {
    visibility: visible;
    margin-left: 0px;
    transform: none;
}

.overview-drawer.drawer-start.hiding {
    visibility: visible;
}

/*--------------------------------------------------------------
2 Column Gallery
--------------------------------------------------------------*/
.gallery-col-2 {
    --col-min: 240px;

    display: grid;
    grid-gap: var(--space-300);

    grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min), 100%), 1fr));
}

.gallery-col-3 {
    --col-min: 180px;

    display: grid;
    grid-gap: var(--space-300);

    grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min), 100%), 1fr));
}

.gallery-col-2>*,
.gallery-col-2>* {
    margin-inline: auto;
}