@font-face {
    font-family: "Snell Roundhand W01 Script";
    src: url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.eot");
    src:
        url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.eot?#iefix")
            format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.woff2")
            format("woff2"),
        url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.woff")
            format("woff"),
        url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.ttf")
            format("truetype"),
        url("https://db.onlinewebfonts.com/t/f8deb3c1a029ec56b15bb462c1518f07.svg#Snell Roundhand W01 Script")
            format("svg");
}

@font-face {
    font-family: "lulo-one", sans-serif;
    font-weight: 700;
    font-style: normal;
    src: url(https://use.typekit.net/znp3hac.css);
}

:root {
    --color-bg-light: rgb(247, 246, 240); /* alabaster */
    --color-text-light: #0a7b5fff; /* viridian */
    --color-accent-light: #f3a3c6ff; /* carnation pink */
    --color-bg-dark: rgb(208, 191, 168); /* khaki */
    --color-text-dark: #264e43ff; /* brunswick green */
    --color-accent-dark: #ee343dff; /* imperial red */
    --title-font: "Snell Roundhand W01 Script", cursive;
    --logo-font: "lulo-one", sans-serif;
    --body-font: "Poppins", sans-serif;
}

/* check */
@media only screen and (max-width: 368px) {
    * {
        background-color: var(--color-accent-dark);
        scrollbar-width: none;
        scrollbar-color: var(--color-accent-light) var(--color-bg-light);
        cursor: default;
    }

    body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 50px 1fr 50px;
        justify-content: center;
        align-items: center;
        grid-area: "header" "main" "footer";
        background-color: var(--color-bg-light);
        padding: 0;
        margin: 0;
    }

    .container {
        grid-area: main;
        height: 70vh;
        margin: 0 auto;
        background-image: url(/images/galbo-socks.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 10px 15px 10px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 0.75em;
    }

    .titel {
        font-size: 1.5em;
        background-color: transparent;
        color: var(--color-text-dark);
        text-align: center;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.5em;
    }

    h1 {
        font-family: var(--title-font);
        color: var(--color-bg-light);
        font-weight: 200;
        background-color: transparent;
        text-align: center;
        padding: 10px 0;
        margin: 0 0 10px 0;
    }

    .tekst {
        background-color: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1em;
        text-align: center;
    }

    .hptxt {
        background-color: transparent;
        color: var(--color-bg-light);
        font-size: 0.5em;
        font-family: var(--logo-font);
        padding: 10px 0;
        margin: 0;
        font-weight: normal;
        text-align: center;
    }

    #btn {
        background-color: transparent;
        color: var(--color-bg-light);
        font-size: 0.75em;
        font-family: var(--logo-font);
        text-decoration: none;
        font-weight: 400;
        padding: 0 3em;
        overflow: hidden;
        border-radius: 50px;
    }

    #btnhome {
        background: transparent;
        position: relative;
        padding: 4px 0 2px 0;
        display: flex;
        align-items: center;
        font-size: 0.8em;
        cursor: pointer;
        border: 1px solid var(--color-bg-light);
        border-radius: 50px;
        transition: color 0.3s 0.1s ease-out;
        text-align: center;
        margin: 10px 0 0 0;
    }

    #btnhome:hover {
        border: 1px solid var(--color-bg-light);
        background-color: var(--color-bg-light);
        opacity: 75%;
    }

    #btn:hover {
        color: var(--color-text-dark);
        opacity: 100%;
    }

    .collections,
    .shop {
        text-align: center;
        margin: 30px 0;
        padding: 0;
    }

    .collection-gallery {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 0 0 5px 0;
        margin: 25px 0 65px 0;
        padding: 0;
    }

    .collection-gallery img {
        object-fit: cover;
        height: auto;
        width: 100%;
    }

    .pp-txt-products {
        font-size: 2em;
        font-weight: bold;
        font-family: var(--title-font);
        color: var(--color-bg-dark);
        text-align: center;
        padding: 0;
        margin: 0;
    }

    .pptxt-products {
        font-size: 0.75em;
        font-weight: 200;
        font-family: var(--body-font);
        color: var(--color-text-dark);
        text-align: justify;
        text-justify: newspaper;
        padding: 0 15px;
        margin: 0;
        line-height: 1.5em;
    }

    .products {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 0 10px 0;
        margin: 0;
        gap: 25px;
    }

    h2 {
        font-size: 1em;
        font-weight: bold;
        font-family: var(--logo-font);
        color: var(--color-bg-dark);
        text-align: center;
        padding: 15px 0;
        margin: 0;
        letter-spacing: 0.5em;
        border: none;
    }

    h3 {
        font-size: 0.75em;
        font-weight: 700;
        font-family: var(--logo-font);
        text-align: center;
        color: var(--color-bg-dark);
        letter-spacing: -1px;
        padding: 0 0 5px 0;
        margin: 0 10px;
        cursor: pointer;
        word-wrap: normal;
        border: none;
    }

    h3:hover {
        color: var(--color-text-dark);
    }

    h3:active {
        color: var(--color-bg-dark);
        opacity: 100%;
    }

    h4 {
        font-size: 0.65em;
        font-weight: 700;
        font-family: var(--logo-font);
        text-align: left;
        color: var(--color-text-dark);
        letter-spacing: -1px;
        padding: 0 15px 0 7.5px;
        margin: 0;
        cursor: pointer;
        word-wrap: normal;
        border: none;
    }

    .gllr-txt {
        font-size: 0.6em;
        font-weight: 300;
        font-family: var(--body-font);
        text-wrap: wrap;
        color: var(--color-text-dark);
        padding: 0 15px 0 7.5px;
        margin: 0;
        text-align: justify;
    }

    .gllr-price {
        font-size: 0.55em;
        font-weight: 600;
        font-family: var(--logo-font);
        text-align: right;
        color: var(--color-text-dark);
        margin: 0;
        padding: 0 15px 0 7.5px;
    }

    .colltext {
        display: none;
        overflow: hidden;
        padding: 5px 0 15px 0;
    }

    .collapsible {
        background: transparent;
        position: relative;
        padding: 5px 0;
        font-size: 1em;
        cursor: pointer;
        border: none;
    }

    .gallery-text {
        flex-basis: 50%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .gallery-image {
        flex-basis: 50%;
        padding: 0 7.5px 0 15px;
        margin: 0;
    }
}

/* check */
@media only screen and (min-width: 368px) {
    * {
        background-color: var(--color-bg-light);
        scrollbar-width: none;
        scrollbar-color: var(--color-accent-light) var(--color-bg-light);
        cursor: default;
    }

    body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 75px 1fr 50px;
        justify-content: center;
        align-items: center;
        grid-area: "header" "main" "footer";
        background-color: var(--color-bg-light);
        padding: 0;
        margin: 0;
    }

    .container {
        grid-area: main;
        height: 70vh;
        margin: 0 auto;
        background-image: url(/images/galbo-socks.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 10px 15px 10px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 0.75em;
    }

    .titel {
        font-size: 1.5em;
        background-color: transparent;
        color: var(--color-text-dark);
        text-align: center;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.5em;
    }

    h1 {
        font-family: var(--title-font);
        color: var(--color-bg-light);
        font-weight: 200;
        background-color: transparent;
        text-align: center;
        padding: 10px 0;
        margin: 0 0 10px 0;
    }

    .tekst {
        background-color: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1em;
        text-align: center;
    }

    .hptxt {
        background-color: transparent;
        color: var(--color-bg-light);
        font-size: 0.5em;
        font-family: var(--logo-font);
        padding: 10px 0;
        margin: 0;
        font-weight: normal;
        text-align: center;
    }

    #btn {
        background-color: transparent;
        color: var(--color-bg-light);
        font-size: 0.75em;
        font-family: var(--logo-font);
        text-decoration: none;
        font-weight: 400;
        padding: 0 3em;
        overflow: hidden;
        border-radius: 50px;
    }

    #btnhome {
        background: transparent;
        position: relative;
        padding: 4px 0 2px 0;
        display: flex;
        align-items: center;
        font-size: 0.8em;
        cursor: pointer;
        border: 1px solid var(--color-bg-light);
        border-radius: 50px;
        transition: color 0.3s 0.1s ease-out;
        text-align: center;
        margin: 10px 0 0 0;
    }

    #btnhome:hover {
        border: 1px solid var(--color-bg-light);
        background-color: var(--color-bg-light);
        opacity: 75%;
    }

    #btn:hover {
        color: var(--color-text-dark);
        opacity: 100%;
    }

    .collections,
    .shop {
        text-align: center;
        margin: 30px 0;
        padding: 0;
    }

    .collection-gallery {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 0 0 5px 0;
        margin: 25px 0 65px 0;
        padding: 0;
    }

    .collection-gallery img {
        object-fit: cover;
        height: auto;
        width: 85%;
    }

    .pp-txt-products {
        font-size: 2.5em;
        font-weight: bold;
        font-family: var(--title-font);
        color: var(--color-bg-dark);
        text-align: center;
        padding: 0;
        margin: 0;
    }

    .pptxt-products {
        font-size: 0.75em;
        font-weight: 200;
        font-family: var(--body-font);
        color: var(--color-text-dark);
        text-align: justify;
        text-justify: newspaper;
        padding: 0 25px;
        margin: 0;
        line-height: 1.5em;
    }

    .products {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 0 10px 0;
        margin: 0;
        gap: 25px;
    }

    h2 {
        font-size: 1.05em;
        font-weight: bold;
        font-family: var(--logo-font);
        color: var(--color-bg-dark);
        text-align: center;
        padding: 15px 0;
        margin: 0;
        letter-spacing: 0.5em;
        border: none;
    }

    h3 {
        font-size: 1em;
        font-weight: 700;
        font-family: var(--logo-font);
        text-align: center;
        color: var(--color-bg-dark);
        letter-spacing: -1px;
        padding: 0 0 5px 0;
        margin: 0 10px;
        cursor: pointer;
        word-wrap: normal;
        border: none;
    }

    h3:hover {
        color: var(--color-text-dark);
    }

    h3:active {
        color: var(--color-bg-dark);
        opacity: 100%;
    }

    h4 {
        font-size: 0.75em;
        font-weight: 700;
        font-family: var(--logo-font);
        text-align: left;
        color: var(--color-text-dark);
        letter-spacing: -1px;
        padding: 0 20px 0 0;
        margin: 0;
        cursor: pointer;
        word-wrap: normal;
        border: none;
    }

    .gllr-txt {
        font-size: 0.65em;
        font-weight: 300;
        font-family: var(--body-font);
        text-wrap: wrap;
        color: var(--color-text-dark);
        padding: 0 20px 0 0;
        margin: 0;
        text-align: justify;
    }

    .gllr-price {
        font-size: 0.55em;
        font-weight: 600;
        font-family: var(--logo-font);
        text-align: right;
        color: var(--color-text-dark);
        margin: 0;
        padding: 0 20px 0 0;
    }

    .colltext {
        display: none;
        overflow: hidden;
        padding: 5px 0 15px 0;
    }

    .collapsible {
        background: transparent;
        position: relative;
        padding: 5px 0;
        cursor: pointer;
        border: none;
    }

    .gallery-text {
        flex-basis: 50%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .gallery-image {
        flex-basis: 50%;
        padding: 0 0 0 5px;
        margin: 0;
    }
}

/* check */
@media only screen and (min-width: 521px) {
    * {
        background-color: var(--color-bg-light);
        scrollbar-width: none;
        scrollbar-color: var(--color-accent-light) var(--color-bg-light);
        cursor: default;
    }

    body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 75px 1fr 50px;
        justify-content: center;
        align-items: center;
        grid-area: "header" "main" "footer";
        background-color: var(--color-bg-light);
        padding: 0;
        margin: 0;
    }

    .container {
        grid-area: main;
        height: 70vh;
        margin: 0 auto;
        background-image: url(/images/galbo-socks.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 10px 15px 10px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 0.75em;
    }

    .titel {
        font-size: 1.5em;
        background-color: transparent;
        color: var(--color-text-dark);
        text-align: center;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.5em;
    }

    h1 {
        font-family: var(--title-font);
        color: var(--color-bg-light);
        font-weight: 200;
        background-color: transparent;
        text-align: center;
        padding: 10px 0;
        margin: 0 0 10px 0;
    }

    .tekst {
        background-color: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1em;
        text-align: center;
    }

    .hptxt {
        background-color: transparent;
        color: var(--color-bg-light);
        font-size: 0.5em;
        font-family: var(--logo-font);
        padding: 10px 0;
        margin: 0;
        font-weight: normal;
        text-align: center;
    }

    #btn {
        background-color: transparent;
        color: var(--color-bg-light);
        font-size: 0.75em;
        font-family: var(--logo-font);
        text-decoration: none;
        font-weight: 400;
        padding: 0 3em;
        overflow: hidden;
        border-radius: 50px;
    }

    #btnhome {
        background: transparent;
        position: relative;
        padding: 4px 0 2px 0;
        display: flex;
        align-items: center;
        font-size: 0.8em;
        cursor: pointer;
        border: 1px solid var(--color-bg-light);
        border-radius: 50px;
        transition: color 0.3s 0.1s ease-out;
        text-align: center;
        margin: 10px 0 0 0;
    }

    #btnhome:hover {
        border: 1px solid var(--color-bg-light);
        background-color: var(--color-bg-light);
        opacity: 75%;
    }

    #btn:hover {
        color: var(--color-text-dark);
        opacity: 100%;
    }

    .collections,
    .shop {
        text-align: center;
        margin: 30px 0;
        padding: 0;
    }

    .collection-gallery {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 0 0 5px 0;
        margin: 25px 0 65px 0;
        padding: 0;
    }

    .collection-gallery img {
        object-fit: cover;
        height: auto;
        width: 85%;
    }

    .pp-txt-products {
        font-size: 4em;
        font-weight: bold;
        font-family: var(--title-font);
        color: var(--color-bg-dark);
        text-align: center;
        padding: 25px 0;
        margin: 0;
        letter-spacing: -0.75px;
    }

    .pptxt-products {
        font-size: 1em;
        font-weight: 200;
        font-family: var(--body-font);
        color: var(--color-text-dark);
        text-align: justify;
        text-justify: newspaper;
        padding: 0 75px 25px 75px;
        margin: 0;
        line-height: 1.5em;
    }

    .products {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 0 10px 0;
        margin: 0;
        gap: 25px;
    }

    h2 {
        font-size: 1.35em;
        font-weight: bold;
        font-family: var(--logo-font);
        color: var(--color-bg-dark);
        text-align: center;
        padding: 25px 0;
        margin: 0;
        letter-spacing: 1em;
        border: none;
    }

    h3 {
        font-size: 1.25em;
        font-weight: bold;
        font-family: var(--logo-font);
        text-align: center;
        color: var(--color-bg-dark);
        letter-spacing: -1px;
        padding: 0 0 10px 0;
        margin: 0 10px;
        cursor: pointer;
        word-wrap: normal;
        border: none;
    }

    h3:hover {
        color: var(--color-text-dark);
    }

    h3:active {
        color: var(--color-bg-dark);
        opacity: 100%;
    }

    h4 {
        font-size: 1em;
        font-weight: 700;
        font-family: var(--logo-font);
        text-align: left;
        color: var(--color-text-dark);
        letter-spacing: -1px;
        padding: 0 75px 0 12.5px;
        margin: 0;
        cursor: pointer;
        word-wrap: normal;
        border: none;
    }

    .gllr-txt {
        font-size: 0.7em;
        font-weight: 300;
        font-family: var(--body-font);
        text-wrap: wrap;
        color: var(--color-text-dark);
        padding: 0 75px 0 12.5px;
        margin: 0;
        text-align: left;
    }

    .gllr-price {
        font-size: 0.85em;
        font-weight: 600;
        font-family: var(--logo-font);
        text-align: right;
        color: var(--color-text-dark);
        margin: 0;
        padding: 0 75px 0 12.5px;
    }

    .colltext {
        display: none;
        overflow: hidden;
        padding: 5px 0 15px 0;
    }

    #colltitle {
        border: none;
    }

    .collapsible {
        background: transparent;
        position: relative;
        padding: 5px 0;
        cursor: pointer;
        border: none;
    }

    .gallery-text {
        flex-basis: 50%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .gallery-image {
        flex-basis: 50%;
        padding: 0 12.5px 0 75px;
        margin: 0;
    }
}

/* in progress */
@media only screen and (min-width: 690px) {
    * {
        background-color: var(--color-bg-light);
        scrollbar-width: none;
        scrollbar-color: var(--color-accent-light) var(--color-bg-light);
        cursor: default;
    }

    body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 75px 1fr 50px;
        justify-content: center;
        align-items: center;
        grid-area: "header" "main" "footer";
        background-color: var(--color-bg-light);
        padding: 0;
        margin: 0;
    }

    .container {
        grid-area: main;
        height: 70vh;
        margin: 0 auto;
        background-image: url(/images/galbo-socks.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 10px 15px 10px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 0.75em;
    }

    .titel {
        font-size: 1.5em;
        background-color: transparent;
        color: var(--color-text-dark);
        text-align: center;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.5em;
    }

    h1 {
        font-family: var(--title-font);
        color: var(--color-bg-light);
        font-weight: 200;
        background-color: transparent;
        text-align: center;
        padding: 10px 0;
        margin: 0 0 10px 0;
    }

    .tekst {
        background-color: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1em;
        text-align: center;
    }

    .hptxt {
        background-color: transparent;
        color: var(--color-bg-light);
        font-size: 0.5em;
        font-family: var(--logo-font);
        padding: 10px 0;
        margin: 0;
        font-weight: normal;
        text-align: center;
    }

    #btn {
        background-color: transparent;
        color: var(--color-bg-light);
        font-size: 0.75em;
        font-family: var(--logo-font);
        text-decoration: none;
        font-weight: 400;
        padding: 0 3em;
        overflow: hidden;
        border-radius: 50px;
    }

    #btnhome {
        background: transparent;
        position: relative;
        padding: 4px 0 2px 0;
        display: flex;
        align-items: center;
        font-size: 0.8em;
        cursor: pointer;
        border: 1px solid var(--color-bg-light);
        border-radius: 50px;
        transition: color 0.3s 0.1s ease-out;
        text-align: center;
        margin: 10px 0 0 0;
    }

    #btnhome:hover {
        border: 1px solid var(--color-bg-light);
        background-color: var(--color-bg-light);
        opacity: 75%;
    }

    #btn:hover {
        color: var(--color-text-dark);
        opacity: 100%;
    }

    .collections,
    .shop {
        text-align: center;
        margin: 30px 0;
        padding: 0;
    }

    .collection-gallery {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 0 0 5px 0;
        margin: 25px 0 65px 0;
        padding: 0;
    }

    .collection-gallery img {
        object-fit: cover;
        height: auto;
        width: 85%;
    }

    .pp-txt-products {
        font-size: 4em;
        font-weight: bold;
        font-family: var(--title-font);
        color: var(--color-bg-dark);
        text-align: center;
        padding: 25px 0;
        margin: 0;
        letter-spacing: -0.75px;
    }

    .pptxt-products {
        font-size: 1em;
        font-weight: 200;
        font-family: var(--body-font);
        color: var(--color-text-dark);
        text-align: justify;
        text-justify: newspaper;
        padding: 0 75px 25px 75px;
        margin: 0;
        line-height: 1.5em;
    }

    .products {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 0 10px 0;
        margin: 0;
        gap: 25px;
    }

    h2 {
        font-size: 1.75em;
        font-weight: bold;
        font-family: var(--logo-font);
        color: var(--color-bg-dark);
        text-align: center;
        padding: 25px 0;
        margin: 0;
        letter-spacing: 1em;
        border: none;
    }

    h3 {
        font-size: 1.5em;
        font-weight: bold;
        font-family: var(--logo-font);
        text-align: center;
        color: var(--color-bg-dark);
        letter-spacing: -1px;
        padding: 0 0 10px 0;
        margin: 0 10px;
        cursor: pointer;
        word-wrap: normal;
        border: none;
    }

    h3:hover {
        color: var(--color-text-dark);
    }

    h3:active {
        color: var(--color-bg-dark);
        opacity: 100%;
    }

    h4 {
        font-size: 1.75em;
        font-weight: 700;
        font-family: var(--logo-font);
        text-align: left;
        color: var(--color-text-dark);
        letter-spacing: -1px;
        padding: 0 150px 0 12.5px;
        margin: 0;
        cursor: pointer;
        word-wrap: normal;
        border: none;
    }

    .gllr-txt {
        font-size: 1em;
        font-weight: 300;
        font-family: var(--body-font);
        text-wrap: wrap;
        color: var(--color-text-dark);
        padding: 0 150px 0 12.5px;
        margin: 0;
        text-align: justify;
    }

    .gllr-price {
        font-size: 1.15em;
        font-weight: 600;
        font-family: var(--logo-font);
        text-align: right;
        color: var(--color-text-dark);
        margin: 0;
        padding: 0 150px 0 12.5px;
    }

    .colltext {
        display: none;
        overflow: hidden;
        padding: 5px 0 15px 0;
    }

    .collapsible {
        background: transparent;
        position: relative;
        padding: 5px 0;
        cursor: pointer;
        border: none;
    }

    .gallery-text {
        flex-basis: 50%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .gallery-image {
        flex-basis: 50%;
        padding: 0 12.5px 0 150px;
        margin: 0;
    }
}