/**
 * Reset
 * Demo - Basic Resets
 */

 html {
    box-sizing: border-box;
    --d-bg-lb: lightblue;
    --d-bg-lc: lightcoral;
    --d-bg-lg: lightgreen;
}

h1 {
    color: white;
}

.title {
    color: white;
}

.zoom {
    transition: transform 0.3s;
      width: 200px;
}

.zoom:hover {
    transform: scale(1.2); /* Increase size on hover */
      z-index: 10;
}

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

body {
    margin: 0;
    font-family: sans-serif;
}



:root {
    --gap: 10px;
    --bg-header: hsla(234, 64%, 26%, 1);
    --bg-nav: hsla(227, 59%, 22%, 1);
    --bg-main: hsla(35, 69%, 87%, 1);
    --bg-aside: hsla(10, 56%, 65%, 1);
    --bg-footer: hsla(0, 73%, 43%, 1);

}

body {
    display: grid;
    
    grid-template-rows: auto auto 1fr auto;
    height: 100vh;
    height: 100dvh;
}

body>* {
    padding: 0 var(--gap);
}

.grid-align-self-center {
    align-self: center;
}

.wrapper {
    display: grid;
    grid-template-columns: minmax(auto, 1024px);
    justify-content: center;
}

.wrapper-bg-header {
    background: var(--bg-header);
}

.wrapper-bg-nav {
    background: var(--bg-nav);
}

.wrapper-bg-main {
    background: var(--bg-main);
}

.wrapper-bg-aside {
    background: var(--bg-aside);
}

.wrapper-bg-footer {
    background: var(--bg-footer);
}

ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    justify-content: space-between;
}

ul a {
    display: flex;
    line-height: 3em;
    padding: 0 1em;
    background: white;
    border: 1px solid;
}

img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: contain;
}

footer > div {
    display: flex;
}

footer > div > a {
    line-height: 3em;
    padding: 0 1em;
    background: white;
    border: 1px solid;
}

footer > div > a:first-child {
    margin-right: auto;
}

@media screen and (min-width: 768px) {
    .grid-12 {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--gap);
    }

    .grid-12-span-12 {
        grid-column: 1 / 13;
    }

    .grid-12-span-6 {
        grid-column: span 6;
    }

    .grid-12-span-4 {
        grid-column: span 4;
    }

    .grid-12-span-3 {
        grid-column: span 3;
    }

    .grid-12-s1-e2 {
        grid-column: 1 / 2;
    }

    .grid-12-s2-e6 {
        grid-column: 2 / 6;
    }

    .grid-12-s6-e8 {
        grid-column: 6 / 8;
    }

    .grid-12-s8-e12 {
        grid-column: 8 / 12;
    }

    .grid-12-s12-e13 {
        grid-column: 12 / 13;
    }

    img {
        aspect-ratio: auto;
    }

}

/* Navigation - Headroom JS Move Navigation on Scroll */
.headroom {
    will-change: transform;
    transition: all .5s linear;

}

.headroom--pinned {
    transform: translateY(0%);
    opacity: 1;
}

.headroom--unpinned {
    transform: translateY(-100%);
    opacity: 0;
}