body {
    font-family: "Poppins", sans-serif;
}

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #gallery-1446 {
        padding: 3rem 1rem 1rem 1rem;
    }
    #gallery-1446 .cs-container {
        width: 100%;
        max-width: 36.5rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(1rem, 2vw, 1.4rem);
        position: relative;
    }
    #gallery-1446 .cs-content {
        text-align: left;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1.5rem;
    }

    #gallery-1446 .cs-content-canvas {
        text-align: left;
        width: 100%;
        display: none;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 1.5rem;
        margin: auto;
        padding-top: 1.5rem;
    }


    #gallery-1446 .canvas {
        border: 1px solid black;
        margin: auto;
    }   

    #gallery-1446 .cs-content-button {
        text-align: left;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 1.5rem;
        padding-top:0.5rem;
    }
    #gallery-1446 .cs-title {
        margin: 0;
    }
    #gallery-1446 .cs-gallery {
        width: 100%;
        padding: 3rem 0 0 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(19.0625rem, 1fr));
        /* 16px - 20px */
        gap: clamp(1rem, 1.5vw, 1.25rem);
        position: relative;
    }
    #gallery-1446 .cs-image {
        /* 260px - 360px */
        min-height: clamp(16.25rem, 60vw, 20rem);
        border-radius: 1rem;
        /* clips the image corners */
        overflow: hidden;
        display: block;
        position: relative;
    }
    #gallery-1446 .cs-image img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it act like a background image */
        object-fit: contain;
    }
    #gallery-1446 .cs-button-solid {

        flex: 50%;
        font-size: 1.1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: black;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--colorShadeE);
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        width: 200px;
        border: 2px solid var(--colorShadeA);
        background: primary;
        transform-style: preserve-3d;
        transition: all 175ms cubic-bezier(0, 0, 1, 1);
    }
    #gallery-1446 .cs-button-solid:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--colorShadeC);
        border-radius: inherit;
        box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.75em 0 0 var(--colorShadeA);
        transform: translate3d(0, 0.75em, -1em);
        transition: all 175ms cubic-bezier(0, 0, 1, 1);
    }

    #gallery-1446 .cs-button-solid:hover:before {
        width: 100%;
    }

    #gallery-1446 .cs-button-solid:hover {
        background: var(--colorShadeD);
        transform: translate(0, 0.375em);
    }

    #gallery-1446 .cs-button-solid:hover::before {
        transform: translate3d(0, 0.75em, -1em);
    }

    #gallery-1446 .cs-button-solid:active {
        transform: translate(0em, 0.75em);
    }   

    #gallery-1446 .cs-button-solid:active::before {
      transform: translate3d(0, 0, -1em);
      box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.25em 0 0 var(--colorShadeB);
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #gallery-1446 .cs-container {
        max-width: 65rem;
    }
    #gallery-1446 .cs-content {
        text-align: left;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1.5rem;
    }
    #gallery-1446 .cs-content-canvas {
        text-align: left;
        width: 100%;
        display: none;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 1.5rem;
        margin: auto;
        padding-top: 2.5rem;
    }
    #gallery-1446 .cs-button {
        text-align: left;
        width: 40%%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        gap: 1.5rem;
    }
}

/*-- -------------------------- -->
<---        Wizard Maker        -->
<--- -------------------------- -*/

    #gallery-1446 .custom-upload-download-button {
        border: 1px solid #ccc;
        display: inline-block;
        padding: 6px 12px;
        cursor: pointer;
        background-color: #efefef;
        font-size: 0.7rem;
    }
    #gallery-1446 input {
        align-items: center;
        margin: auto;
        display: none;
    }

    #gallery-1446 .gear {
        width: 120px;
        height: 70px;
    }

    #gallery-1446 .canvas-container {
        margin: auto;
        max-width: 100%;
        align-items: center;
    }

    #gallery-1446 .canvas {
        border: 1px solid black;
        margin: auto;
        width: 100%;
        max-width: 100%;
    } 

    #gallery-1446 .cs-instructions {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: center;
        width: 100%;
        max-width: 100%;
        margin: 0;
        color: var(--bodyTextColor);
    }

    #download {
        display: none;
    }