/* Homepage: 0.0.5

Theme */
/* css reset */
/* 1. Use a more-intuitive box-sizing model */
@layer default, mobile, desktop, tablet, fullscreen;

/* media queries */
@media (min-width: 1920px) {
    @layer fullscreen 

        :root {
        --text-white: #ffffff;
        --text-gray: #a9a9a9;
        --black: #121111;
        --blue: #0038ff;
        --white: #ffffff;
    }

    /* fonts */
    body h1 {
        font-size: 150px ;
        font-weight: bolder ;
    }

    body h2 {
        font-size: 57px ;
        font-weight: bolder ;
    }

    body h3 {
        font-size: 35px ;
        font-weight: bolder ;
    }

    body h4 {
        font-size: 22px ;
        font-weight: bolder ;
    }

    body h5 {
        font-size: 14px ;
        font-weight: bold ;
    }

    body button {
        font-family: Roboto;
        font-weight: 500;
        font-size: 22px !important;
        text-transform: uppercase;
        border: none;
        color: var(--text-white);
    }

    body {
        font-family: Roboto;
        font-size: 14px;
    }

    body tag {
        font-family: Roboto;
        font-weight: 500;
        font-size: 18px;
    }

    body card-tag {
        font-family: Roboto;
        font-weight: 400;
        font-size: 12px;
    }

    #home-page-w1920 {
        position: relative;
        max-width: 1920px;
        width: 100%;
        margin-inline: auto;
        height: auto;
        background: #121111;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        grid-auto-rows: minmax(0,auto);
        place-items: center;
        grid-template-areas: "header header header header header header header header"
          "hero hero hero hero hero hero hero hero"
          "team-spirit team-spirit team-spirit team-spirit team-spirit team-spirit team-spirit team-spirit"
          "design-team design-team design-team design-team design-team design-team design-team design-team"
          "custom-design custom-design custom-design custom-design custom-design custom-design custom-design custom-design"
          "meet-teams meet-teams meet-teams meet-teams meet-teams meet-teams meet-teams meet-teams"
          "why-cake why-cake why-cake why-cake why-cake why-cake why-cake why-cake"
          "shoutout shoutout shoutout shoutout shoutout shoutout shoutout shoutout"
          "footer footer footer footer footer footer footer footer";
    }

    .grid-area-header {
        grid-area: header;
        position: relative;
        place-content: center;
        background-color: var(--black);
    }

    .grid-area-hero {
        grid-area: hero;
        position: relative;
        place-content: center;
        background-color: var(--black);
    }

    .grid-area-team-spirit {
        grid-area: team-spirit;
        position: relative;
        place-content: center;
        background-color: var(--black);
    }

    .grid-area-design-team {
        grid-area: design-team;
        position: relative;
        place-content: center;
        transform: translateY(-9%);
        background-color: var(--black);
    }

    .grid-area-custom-design {
        grid-area: custom-design;
        position: relative;
        place-content: center;
        background-color: var(--black);
    }

    .grid-area-meet-teams {
        grid-area: meet-teams;
        position: relative;
        place-content: center;
        background-color: var(--black);
    }

    .grid-area-why-cake {
        grid-area: why-cake;
        position: relative;
        place-content: center;
        background-color: var(--black);
    }

    .grid-area-shoutout {
        grid-area: shoutout;
        position: relative;
        place-content: center;
        background-color: var(--black);
    }

    .grid-area-footer {
        grid-area: footer;
        position: relative;
        place-content: center;
        background-color: var(--black);
    }

    .two-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .three-columns {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: 1fr;
    }

    .four-columns {
        display: grid;
        grid-template-columns: repeat(4,1fr);
    }

    .five-columns {
        display: grid;
        grid-template-columns: repeat(5,1fr);
    }

    .layer-4 {
        z-index: 100;
    }

    .layer-3 {
        z-index: 50;
    }

    .layer-2 {
        z-index: 25;
    }

    .layer-1 {
        z-index: 1;
    }

    .layer--1 {
        z-index: -1;
    }

    .flex-center {
        display: flex;
        justify-content: center;
    }

    #home-page-v2 {
        width: 100%;
        left: 0px;
        top: 0px;
        background: #121111;
    }

    #hero-planet {
        grid-area: 1 / 2 / 2 / 2;
        justify-self: center;
        align-self: start;
        transform: translateX(-76%);
        width: 510px;
        aspect-ratio: 1;
    }

    .planet-overlay {
        position: relative;
        width: 500px;
        height: 500px;
        overflow: hidden;
    }

    .planet {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* keyframes */
    @keyframes rotateAnimation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    #hero-planet img {
        animation: rotateAnimation 30s linear infinite;
    }

    @keyframes scrollText {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    .overflow-wrapper {
        overflow: hidden;
        box-sizing: border-box;
        width: 100%;
        white-space: nowrap;
    }

    .overflow-wrapper h2 {
        display: block;
        white-space: nowrap;
        animation: scrollText 10s linear infinite;
    }

    /* end keyframes */
    #vector__vector-48 {
        width: 194.86357373096084;
        height: 116.59909211035506;
        border-width: 2px;
        grid-area: 2 / 4 / 2 / 4;
        transform: translateY(95%);
    }

    #group__frame-318--png-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0px;
        width: 366px;
        height: 522px;
        gap: 20px;
        grid-area: 3 / 4 / 3 / 4;
        transform: translateY(45%);
    }

    #png__spirit {
        transform: translateY(-4.5%) translateX(-9%);
        grid-area: 1 / 3 / 5 / 3;
    }

    #group__frame-300--heading-text-button {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 14px;
        width: 528px;
        height: 252px;
        grid-area: 2 / 2 / 2 / 2;
        justify-self: center;
        align-self: start;
        transform: translateX(-58%) translateY(-145%);
    }

    #vector-5__line-1 {
        width: 1054.5px;
        grid-area: 1 / 1 / 1/ 1;
    }

    #group__strava-social {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0px;
        gap: 29px;
        width: 1160px;
        height: 137px;
        grid-area: 2 / 2 / 4 / 2;
    }

    #group__group-126--rotating-circle {
        grid-area: 1 / 3 / 1 / 3;
    }

    #group__frame-307--custom-design {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 35px;
        width: 416px;
        height: 228px;
        gap: 35px;
        grid-area: 1 / 4 / 1 / 4;
    }

    #group__frame-306--ready-made-design {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 35px;
        width: 458px;
        height: 419px;
        grid-area: 3 / 2 / 3 / 2;
        transform: translateY(55%);
    }

    #text__discover-our-team {
        width: 263;
        height: 54;
        opacity: 0.5;
        color: #FFFFFF;
        opacity: 0.5;
        grid-area: 2 / 4 / 2 / 4;
    }

    #team-cards {
        width: 100%;
        grid-area: 2 / 1 / 2 / 5;
    }

    #frame-308 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 14px;
        gap: 14px;
        grid-area: 1 / 2 / 1 / 5;
    }

    #frame-311 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 57px;
        height: 495.22px;
        grid-area: 1 / 2 / 1 / 4;
    }

    #make-section-paralax {
        width: 100%;
        height: 934px;
        grid-area: 4 / 5 / 4 / 6;
        transform: translateX(45%);
    }

    #contact-form {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0px;
        gap: 86px;
        width: 100%;
        height: 214px;
        grid-area: 2/3/3/5;
    }

    #footer {
        width: 100%;
        grid-area: 3/2/3/4;
    }

    #belt-8 {
        width: 100%;
        height: 122px;
        grid-area: 1/1/1/6;
    }

    #belt-7 {
        width: 100%;
        height: 122px;
        grid-area: 1 / 1 / 1 / 6;
    }

    #vector__vector-11--line-2 {
        grid-area: 1 / 6 / 5 / 6;
    }

    #logo-1 {
        width: 364px;
        height: 364px;
        opacity: 0.1;
        grid-area: 2 / 2 / 2 / 2;
    }

    #top-menu {
        position: relative;
        width: 100%;
    }

    #status-bar {
        height: 5px;
        grid-area: 1 / 3 / 1 / 5;
        width: 200px;
    }

    #arrows {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0px;
        gap: 1059px;
        grid-area: 1 / 3 / 1 / 4;
    }

    .button-wrapper {
        grid-area: 3 / 3 / 3 / 3;
        display: flex;
        justify-content: center;
    }

    .planet-wrapper {
        grid-column: 2;
        transform: translateX(-48%) translateY(-145%);
    }

    .button-blue--standard {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 20px 30px;
        gap: 10px;
        width: 286px;
        background-color: #0038FF;
        border-radius: 35px;
        color: var(--text-white);
    }

    .button-blue {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 20px 30px;
        gap: 10px;
        background-color: #0038FF;
        border-radius: 35px;
    }

    .button-lined {
        width: 220px;
        height: 62px;
        gap: 10px;
        border-width: 1px;
        border-radius: 35px;
        padding-top: 20px;
        padding-right: 30px;
        padding-bottom: 20px;
        padding-left: 30px;
        grid-area: 5 / 2 / 5 / 2;
    }

    #navigation-bar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0px;
        gap: 1059px;
        position: relative;
        height: 56px;
        grid-area: 1 / 3 / 1 / 5;
    }

    .shirt-rotation {
        grid-area: 1 / 3 / 1 / 4;
        display: flex;
        justify-content: center;
    }

    .item-1 {
        height: 509px;
    }

    .item-2 {
        height: 509px;
        display: none;
    }

    .item-3 {
        height: 509px;
        display: none;
    }

    #go-to-store {
        font-style: normal;
        font-weight: 500;
        font-size: 24px;
        line-height: 34px;
        text-transform: uppercase;
        color: #FFFFFF;
    }

    #text__at-cake {
        width: 293px;
        height: 72px;
        grid-area: 2 / 3 / 2 / 3;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 130%;
        color: #A9A9A9;
    }

    .socials {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 0px;
        gap: 30px;
        width: 150px;
        height: 30px;
        grid-area: 2 / 4 / 2 / 4;
        align-self: end;
    }

    #celebrate-the-team {
        position: relative;
        display: flex;
        height: 372px;
        text-transform: capitalize;
        text-align: center;
        z-index: 0;
        grid-area: 1 / 2 / 1 / 5;
    }

    .hero-shirt {
        grid-column: 5;
        position: relative;
        display: flex;
        justify-content: center;
    }
}

@media (min-width: 1280px) and (max-width: 1919px) {
    @layer desktop {
    }

    /* fonts */
    body h1 {
        font-size: 150px ;
        font-weight: bolder ;
    }

    body h2 {
        font-size: 57px ;
        font-weight: bolder ;
    }

    body h3 {
        font-size: 35px ;
        font-weight: bolder ;
    }

    body h4 {
        font-size: 22px ;
        font-weight: bolder ;
    }

    body h5 {
        font-size: 14px ;
        font-weight: bold ;
    }

    body button {
        font-family: Roboto;
        font-weight: 500;
        font-size: 22px !important;
        text-transform: uppercase;
        border: none;
        color: var(--text-white);
    }

    body {
        font-family: Roboto;
        font-size: 14px;
    }

    body tag {
        font-family: Roboto;
        font-weight: 500;
        font-size: 18px;
    }

    body card-tag {
        font-family: Roboto;
        font-weight: 400;
        font-size: 12px;
    }

    #home-page-w1920 {
        position: relative;

        /* max-width: 1920px; */
        width: 100%;
        margin-inline: auto;
        height: auto;
        background: #121111;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        grid-auto-rows: minmax(0,auto);
        place-items: center;
        grid-template-areas: "header header header header header header header header"
          "hero hero hero hero hero hero hero hero"
          "team-spirit team-spirit team-spirit team-spirit team-spirit team-spirit team-spirit team-spirit"
          "design-team design-team design-team design-team design-team design-team design-team design-team"
          "custom-design custom-design custom-design custom-design custom-design custom-design custom-design custom-design"
          "meet-teams meet-teams meet-teams meet-teams meet-teams meet-teams meet-teams meet-teams"
          "why-cake why-cake why-cake why-cake why-cake why-cake why-cake why-cake"
          "shoutout shoutout shoutout shoutout shoutout shoutout shoutout shoutout"
          "footer footer footer footer footer footer footer footer";
    }

    #celebrate-the-team {
        position: relative;
        display: flex;
        height: 372px;
        text-transform: capitalize;
        text-align: center;
        z-index: 0;
        grid-area: 1 / 2 / 1 / 5;
    }
}

@media (min-width: 744px) and (max-width: 1279px) {
    @layer tablet {
        /* fonts */
        body h1 {
            font-size: 50px !important;
            font-weight: bolder !important;
        }

        body h2 {
            font-size: 30px !important;
            font-weight: bolder !important;
        }

        body h3 {
            font-size: 18px !important;
            font-weight: bolder !important;
        }

        body h4 {
            font-size: 18px !important;
            font-weight: bolder !important;
        }

        body h5 {
            font-size: 12px !important;
            font-weight: bold !important;
        }

        body button {
            font-family: Roboto;
            font-weight: 500;
            font-size: 22px !important;
            text-transform: uppercase;
            border: none;
            color: var(--text-white);
        }

        body {
            font-family: Roboto;
            font-size: 14px;
        }

        body tag {
            font-family: Roboto;
            font-weight: 500;
            font-size: 18px;
        }

        body card-tag {
            font-family: Roboto;
            font-weight: 400;
            font-size: 12px;
        }

        #home-page-w1920 {
            position: relative;
            max-width: 1279px;
            width: 100%;
            margin-inline: auto;
            height: auto;
            background: #121111;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
            grid-auto-rows: minmax(0,auto);
            place-items: center;
            grid-template-areas: "header header header"
          ". hero ."
          "team-spirit team-spirit team-spirit"
          "design-team design-team design-team"
          ". custom-design ."
          "meet-teams meet-teams"
          "why-cake"
          "shoutout"
          "footer";
        }

        .grid-area-header {
            grid-area: header;
            position: relative;
            place-content: center;
            background-color: var(--black);
        }

        .grid-area-hero {
            grid-area: hero;
            position: relative;
            place-content: center;
            background-color: var(--black);
        }

        .grid-area-team-spirit {
            grid-area: team-spirit;
            position: relative;
            place-content: center;
            background-color: var(--black);
        }

        .grid-area-design-team {
            grid-area: design-team;
            position: relative;
            place-content: center;
            transform: translateY(-9%);
            background-color: var(--black);
        }

        .grid-area-custom-design {
            grid-area: custom-design;
            position: relative;
            place-content: center;
            background-color: var(--black);
        }

        .grid-area-meet-teams {
            grid-area: meet-teams;
            position: relative;
            place-content: center;
            background-color: var(--black);
        }

        body .grid-area-why-cake {
            grid-area: why-cake;
            position: relative;
            place-content: center;
            background-color: var(--black);
            grid-template-columns: repeat(1,1fr);
        }

        .grid-area-shoutout {
            grid-area: shoutout;
            position: relative;
            place-content: center;
            background-color: var(--black);
        }

        .grid-area-footer {
            grid-area: footer;
            position: relative;
            place-content: center;
            background-color: var(--black);
        }

        .two-columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .three-columns {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: 1fr;
        }

        .four-columns {
            display: grid;
            grid-template-columns: repeat(4,1fr);
        }

        .five-columns {
            display: grid;
            grid-template-columns: repeat(5,1fr);
        }

        .layer-4 {
            z-index: 100;
        }

        .layer-3 {
            z-index: 50;
        }

        .layer-2 {
            z-index: 25;
        }

        .layer-1 {
            z-index: 1;
        }

        .layer--1 {
            z-index: -1;
        }

        .flex-center {
            display: flex;
            justify-content: center;
        }

        #home-page-v2 {
            width: 100%;
            left: 0px;
            top: 0px;
            background: #121111;
        }

        #hero-planet {
            /* grid-area: 1 / 2 / 2 / 2; */
            /* justify-self: center;
        align-self: start;
        transform: translateX(-76%);
        width: 510px;
        aspect-ratio: 1; */
            width: 100%;
            height: 706px;
        }

        /* keyframes */
        @keyframes rotateAnimation {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes scrollText {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .overflow-wrapper {
            overflow: hidden;
            box-sizing: border-box;
            width: 100%;
            white-space: nowrap;
        }

        .overflow-wrapper h2 {
            display: block;
            white-space: nowrap;
            animation: scrollText 10s linear infinite;
        }

        /* end keyframes */
        #vector__vector-48 {
            display: none;
            width: 194.86357373096084px;
            height: 116.59909211035506px;
            border-width: 2px;

            /* grid-area: 2 / 4 / 2 / 4; */
            transform: translateY(95%);
        }

        #group__frame-318--png-text {
            display: none;
            flex-direction: column;
            align-items: center;
            padding: 0px;
            width: 366px;
            height: 522px;
            gap: 20px;

            /* grid-area: 3 / 4 / 3 / 4; */
            transform: translateY(45%);
        }

        #png__spirit {
            /* transform: translateY(-4.5%) translateX(-9%); */
            /* grid-area: 1 / 3 / 5 / 3; */
            width: 153.625167846679px;
        }

        #group__frame-300--heading-text-button {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0px;
            gap: 14px;
            width: 300px;
            height: 218px;
            grid-area: 2 / 2 / 2 / 2;
            justify-self: center;
            align-self: start;

            /* transform: translateX(-58%) translateY(-145%); */
        }

        #vector-5__line-1 {
            height: 323px;
            width: 505px;

            /* grid-area: 1 / 1 / 1/ 1; */
        }

        #group__strava-social {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            padding: 0px;
            gap: 29px;
            width: 301px;
            height: 236px;

            /* width: 1160px; */
            /* height: 137px; */
            /* grid-area: 2 / 2 / 4 / 2; */
        }

        #group__group-126--rotating-circle {
            /* grid-area: 1 / 3 / 1 / 3; */
        }

        #group__frame-307--custom-design {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0px;
            gap: 35px;
            width: 300px;
            height: 184px;
            gap: 35px;

            /* grid-area: 1 / 4 / 1 / 4; */
        }

        #group__frame-306--ready-made-design {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0px;
            gap: 35px;
            width: 300px;
            height: 286px;

            /* grid-area: 3 / 2 / 3 / 2; */
            /* transform: translateY(55%); */
        }

        #text__discover-our-team {
            width: 263px;
            height: 54px;
            opacity: 0.5;
            color: #FFFFFF;
            opacity: 0.5;

            /* grid-area: 2 / 4 / 2 / 4; */
        }

        #team-cards {
            width: 100%;

            /* grid-area: 2 / 1 / 2 / 5; */
        }

        #frame-308 {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0px;
            gap: 14px;
            gap: 14px;

            /* grid-area: 1 / 2 / 1 / 5; */
        }

        #frame-311 {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0px;
            gap: 57px;
            width: 301px;
            height: 516px;

            /* height: 495.22px; */
            /* grid-area: 1 / 2 / 1 / 4; */
        }

        #make-section-paralax {
            width: 100%;
            height: 430px;

            /* height: 934px; */
            /* grid-area: 4 / 5 / 4 / 6; */
            /* transform: translateX(45%); */
        }

        #contact-form {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            padding: 0px;
            gap: 86px;
            width: 100%;
            height: 214px;

            /* grid-area: 2/3/3/5; */
        }

        #footer {
            width: 100%;

            /* grid-area: 3/2/3/4; */
        }

        #belt-8 {
            width: 100%;
            height: 83px;

            /* grid-area: 1/1/1/6; */
        }

        #belt-7 {
            height: 83px;

            /* grid-area: 1 / 1 / 1 / 6; */
        }

        #vector__vector-11--line-2 {
            /* grid-area: 1 / 6 / 5 / 6; */
            display: none;
        }

        #logo-1 {
            width: 173px;
            height: 173px;
            opacity: 0.1;

            /* grid-area: 2 / 2 / 2 / 2; */
        }

        #top-menu {
            position: relative;
            width: 100%;
        }

        .navbar > .container {
            gap: 120px;
        }

        #status-bar {
            height: 5px;

            /* grid-area: 1 / 3 / 1 / 5; */
        }

        #arrows {
            width: 704px;
            height: 50px;
            top: 321px;
            left: 10px;
            display: flex;
            justify-content: space-between;
            grid-area: 2/1/2/1;
        }

        .button-wrapper {
            grid-area: 3 / 1 / 3 / 1;
            display: flex;
            justify-content: center;
        }

        .planet-wrapper {
            grid-column: 2;
            transform: translateX(-48%) translateY(-145%);
        }

        .button-blue--standard {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 20px 30px;
            gap: 10px;
            width: 286px;
            background-color: #0038FF;
            border-radius: 35px;
            color: var(--text-white);
        }

        .button-blue {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 20px 30px;
            gap: 10px;
            background-color: #0038FF;
            border-radius: 35px;
        }

        .button-lined {
            width: 220px;
            height: 62px;
            gap: 10px;
            border-width: 1px;
            border-radius: 35px;
            padding-top: 20px;
            padding-right: 30px;
            padding-bottom: 20px;
            padding-left: 30px;

            /* grid-area: 5 / 2 / 5 / 2; */
        }

        #navigation-bar {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 0px;

            /* gap: 1059px; */
            position: relative;
            height: 56px;
            grid-area: 2/1/2/1;
        }

        .shirt-rotation {
            /* grid-area: 1 / 3 / 1 / 4; */
            display: flex;
            justify-content: center;
        }

        .item-1 {
            width: 100%;
            height: 319px;
            grid-area: 2/1/2/1;
        }

        .item-2 {
            width: 266.3555908203125px;
            height: 319px;
            display: none;
        }

        .item-3 {
            width: 266.3555908203125px;
            height: 319px;
            display: none;
        }

        #go-to-store {
            font-style: normal;
            font-weight: 500;
            font-size: 24px;
            line-height: 34px;
            text-transform: uppercase;
            color: #FFFFFF;
        }

        #text__at-cake {
            /* display:none; */
            width: 293px;
            height: 72px;

            /* grid-area: 2 / 3 / 2 / 3; */
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 130%;
            color: #A9A9A9;
        }

        .socials {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            padding: 0px;
            gap: 30px;
            width: 150px;
            height: 30px;
            grid-area: 4 / 1 / 4 / 1;
            align-self: end;
        }

        .social-img__center {
            display: flex;
            align-items: center;
        }

        #celebrate-the-team {
            position: relative;
            display: flex;
            height: 124px;
            width: 373px;
            width: 100%;
            text-transform: capitalize;
            text-align: center;
            z-index: -0;
            grid-area: 2 / 1 / 2 / 1;
        }

        .hero-shirt {
            grid-column: 5;
            position: relative;
            display: flex;
            justify-content: center;
        }
    }
}

@media (max-width: 743px) {
    @layer mobile {
        /* fonts */
        body h1 {
            font-size: 50px !important;
            font-weight: bolder !important;
        }

        body h2 {
            font-size: 30px !important;
            font-weight: bolder !important;
        }

        body h3 {
            font-size: 18px !important;
            font-weight: bolder !important;
        }

        body h4 {
            font-size: 18px !important;
            font-weight: bolder !important;
        }

        body h5 {
            font-size: 12px !important;
            font-weight: bold !important;
        }

        body button {
            font-family: Roboto;
            font-weight: 500;
            font-size: 22px !important;
            text-transform: uppercase;
            border: none;
            color: var(--text-white);
        }

        body {
            font-family: Roboto;
            font-size: 14px;
        }

        body tag {
            font-family: Roboto;
            font-weight: 500;
            font-size: 18px;
        }

        body card-tag {
            font-family: Roboto;
            font-weight: 400;
            font-size: 12px;
        }

        #home-page-w1920 {
            position: relative;
            max-width: 743px;
            margin-inline: auto;
            height: auto;
            background: #121111;
            display: grid;

            /* grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); */
            grid-auto-rows: minmax(0,auto);
            place-items: center;
            grid-template-areas: "header header header "
          "hero hero hero "
          "team-spirit team-spirit team-spirit"
          "design-team design-team design-team"
          "custom-design custom-design custom-design"
          "meet-teams meet-teams meet-teams"
          "why-cake why-cake why-cake"
          "shoutout shoutout shoutout"
          "footer footer footer";
        }

        .grid-area-header {
            grid-area: header;
            position: relative;
            place-content: center;
            background-color: var(--black);
        }

        .grid-area-hero {
            grid-area: hero;
            position: relative;
            place-content: center;
            background-color: var(--black);
        }

        .grid-area-team-spirit {
            grid-area: team-spirit;
            position: relative;
            place-content: center;
            background-color: var(--black);
        }

        .grid-area-design-team {
            grid-area: design-team;
            position: relative;
            place-content: center;
            transform: translateY(-9%);
            background-color: var(--black);
        }

        .grid-area-custom-design {
            grid-area: custom-design;
            position: relative;
            place-content: center;
            background-color: var(--black);
        }

        .grid-area-meet-teams {
            grid-area: meet-teams;
            position: relative;
            place-content: center;
            background-color: var(--black);
        }

        .grid-area-why-cake {
            grid-area: why-cake;
            position: relative;
            place-content: center;
            background-color: var(--black);
        }

        .grid-area-shoutout {
            grid-area: shoutout;
            position: relative;
            place-content: center;
            background-color: var(--black);
        }

        .grid-area-footer {
            grid-area: footer;
            position: relative;
            place-content: center;
            background-color: var(--black);
        }

        .two-columns {
            display: grid;
            grid-template-columns: 1fr;
        }

        .three-columns {
            display: grid;
            grid-template-columns: repeat(1,1fr);
            grid-template-rows: 1fr;
        }

        .four-columns {
            display: grid;
            grid-template-columns: repeat(1,1fr);
        }

        .five-columns {
            display: grid;
            grid-template-columns: repeat(1,1fr);
        }

        .layer-4 {
            z-index: 100;
        }

        .layer-3 {
            z-index: 50;
        }

        .layer-2 {
            z-index: 25;
        }

        .layer-1 {
            z-index: 1;
        }

        .layer--1 {
            z-index: -1;
        }

        .flex-center {
            display: flex;
            justify-content: center;
        }

        #home-page-v2 {
            width: 100%;
            left: 0px;
            top: 0px;
            background: #121111;
        }

        #hero-planet {
            /* grid-area: 1 / 2 / 2 / 2; */
            /* justify-self: center;
        align-self: start;
        transform: translateX(-76%);
        width: 510px;
        aspect-ratio: 1; */
            width: 100%;
            height: 343.9999694824219px;
        }

        /* keyframes */
        @keyframes rotateAnimation {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes scrollText {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .overflow-wrapper {
            overflow: hidden;
            box-sizing: border-box;
            width: 100%;
            white-space: nowrap;
        }

        .overflow-wrapper h2 {
            display: block;
            white-space: nowrap;
            animation: scrollText 10s linear infinite;
        }

        /* end keyframes */
        #vector__vector-48 {
            display: none;
            width: 194.86357373096084px;
            height: 116.59909211035506px;
            border-width: 2px;

            /* grid-area: 2 / 4 / 2 / 4; */
            transform: translateY(95%);
        }

        #group__frame-318--png-text {
            display: none;
            flex-direction: column;
            align-items: center;
            padding: 0px;
            width: 366px;
            height: 522px;
            gap: 20px;

            /* grid-area: 3 / 4 / 3 / 4; */
            transform: translateY(45%);
        }

        #png__spirit {
            /* transform: translateY(-4.5%) translateX(-9%); */
            /* grid-area: 1 / 3 / 5 / 3; */
            width: 153.625167846679px;
        }

        #group__frame-300--heading-text-button {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0px;
            gap: 14px;
            width: 528px;
            height: 242px;
            grid-area: 2 / 2 / 2 / 2;
            justify-self: center;
            align-self: start;

            /* transform: translateX(-58%) translateY(-145%); */
        }

        #vector-5__line-1 {
            display: none;
            width: 1054.5px;

            /* grid-area: 1 / 1 / 1/ 1; */
        }

        #group__strava-social {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            padding: 0px;
            gap: 29px;
            width: 301px;
            height: 236px;

            /* width: 1160px; */
            /* height: 137px; */
            /* grid-area: 2 / 2 / 4 / 2; */
        }

        #group__group-126--rotating-circle {
            /* grid-area: 1 / 3 / 1 / 3; */
        }

        #group__frame-307--custom-design {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0px;
            gap: 35px;
            width: 300px;
            height: 184px;
            gap: 35px;

            /* grid-area: 1 / 4 / 1 / 4; */
        }

        #group__frame-306--ready-made-design {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0px;
            gap: 35px;
            width: 300px;
            height: 286px;

            /* grid-area: 3 / 2 / 3 / 2; */
            /* transform: translateY(55%); */
        }

        #text__discover-our-team {
            width: 263px;
            height: 54px;
            opacity: 0.5;
            color: #FFFFFF;
            opacity: 0.5;

            /* grid-area: 2 / 4 / 2 / 4; */
        }

        #team-cards {
            width: 100%;

            /* grid-area: 2 / 1 / 2 / 5; */
        }

        #frame-308 {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0px;
            gap: 14px;
            gap: 14px;

            /* grid-area: 1 / 2 / 1 / 5; */
        }

        #frame-311 {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0px;
            gap: 57px;
            width: 301px;
            height: 516px;

            /* height: 495.22px; */
            /* grid-area: 1 / 2 / 1 / 4; */
        }

        #make-section-paralax {
            width: 100%;
            height: 430px;

            /* height: 934px; */
            /* grid-area: 4 / 5 / 4 / 6; */
            /* transform: translateX(45%); */
        }

        #contact-form {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            padding: 0px;
            gap: 86px;
            width: 100%;
            height: 214px;

            /* grid-area: 2/3/3/5; */
        }

        #footer {
            width: 100%;

            /* grid-area: 3/2/3/4; */
        }

        #belt-8 {
            width: 100%;
            height: 83px;

            /* grid-area: 1/1/1/6; */
        }

        #belt-7 {
            height: 83px;

            /* grid-area: 1 / 1 / 1 / 6; */
        }

        #vector__vector-11--line-2 {
            /* grid-area: 1 / 6 / 5 / 6; */
            display: none;
        }

        #logo-1 {
            width: 173px;
            height: 173px;
            opacity: 0.1;

            /* grid-area: 2 / 2 / 2 / 2; */
        }

        #top-menu {
            position: relative;
            width: 100%;
        }

        .navbar > .container {
            gap: 120px;
        }

        #status-bar {
            height: 5px;

            /* grid-area: 1 / 3 / 1 / 5; */
        }

        #arrows {
            width: 300px;
            height: 50px;
            top: 321px;
            left: 10px;
            display: flex;
            justify-content: space-between;
            grid-area: 2/1/2/1;
        }

        .button-wrapper {
            grid-area: 3 / 1 / 3 / 1;
            display: flex;
            justify-content: center;
        }

        .planet-wrapper {
            grid-column: 2;
            transform: translateX(-48%) translateY(-145%);
        }

        .button-blue--standard {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 20px 30px;
            gap: 10px;
            width: 286px;
            background-color: #0038FF;
            border-radius: 35px;
            color: var(--text-white);
        }

        .button-blue {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 20px 30px;
            gap: 10px;
            background-color: #0038FF;
            border-radius: 35px;
        }

        .button-lined {
            width: 220px;
            height: 62px;
            gap: 10px;
            border-width: 1px;
            border-radius: 35px;
            padding-top: 20px;
            padding-right: 30px;
            padding-bottom: 20px;
            padding-left: 30px;

            /* grid-area: 5 / 2 / 5 / 2; */
        }

        #navigation-bar {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 0px;

            /* gap: 1059px; */
            position: relative;
            height: 56px;
            grid-area: 2/1/2/1;
        }

        .shirt-rotation {
            /* grid-area: 1 / 3 / 1 / 4; */
            display: flex;
            justify-content: center;
        }

        .item-1 {
            width: 100%;
            height: 319px;
            grid-area: 2/1/2/1;
        }

        .item-2 {
            width: 266.3555908203125px;
            height: 319px;
            display: none;
        }

        .item-3 {
            width: 266.3555908203125px;
            height: 319px;
            display: none;
        }

        #go-to-store {
            font-style: normal;
            font-weight: 500;
            font-size: 24px;
            line-height: 34px;
            text-transform: uppercase;
            color: #FFFFFF;
        }

        #text__at-cake {
            display: none;
            width: 293px;
            height: 72px;

            /* grid-area: 2 / 3 / 2 / 3; */
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 130%;
            color: #A9A9A9;
        }

        .socials {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            padding: 0px;
            gap: 30px;
            width: 150px;
            height: 30px;
            grid-area: 4 / 1 / 4 / 1;
            align-self: end;
        }

        .social-img__center {
            display: flex;
            align-items: center;
        }

        #celebrate-the-team {
            position: relative;
            display: flex;
            height: 124px;

            /* width: 373px; */
            width: 100%;
            text-transform: capitalize;
            text-align: center;
            z-index: -1;
            grid-area: 2 / 1 / 2 / 1;
        }

        .hero-shirt {
            grid-column: 5;
            position: relative;
            display: flex;
            justify-content: center;
        }
    }
}

/* main styles */
@layer default {
    :root {
        --text-white: #ffffff;
        --text-gray: #a9a9a9;
        --black: #121111;
        --blue: #0038ff;
        --white: #ffffff;
    }

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

    /* 2. Remove default margin */
    * {
        margin: 0;
    }

    /* 3. Enable keyword animations */
    @media (prefers-reduced-motion: no-preference) {
        html {
            interpolate-size: allow-keywords;
        }
    }

    body {
        /* 4. Add accessible line-height */
        line-height: 1.5;

        /* 5. Improve text rendering */
        -webkit-font-smoothing: antialiased;
    }

    /* 6. Improve media defaults */
    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-width: 100%;
    }

    /* 7. Inherit fonts for form controls */
    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    /* 8. Avoid text overflows */
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }

    /* 9. Improve line wrapping */
    p {
        text-wrap: pretty;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: balance;
    }

    /* 10. Create a root stacking context */
    #root,
    #__next {
        isolation: isolate;
    }

    /* fonts */
    body h1 {
        font-size: 150px ;
        font-weight: bolder ;
    }

    body h2 {
        font-size: 57px ;
        font-weight: bolder ;
    }

    body h3 {
        font-size: 35px ;
        font-weight: bolder ;
    }

    body h4 {
        font-size: 22px ;
        font-weight: bolder ;
    }

    body h5 {
        font-size: 14px ;
        font-weight: bold ;
    }

    body button {
        font-family: Roboto;
        font-weight: 500;
        font-size: 22px !important;
        text-transform: uppercase;
        border: none;
        color: var(--text-white);
    }

    body {
        font-family: Roboto;
        font-size: 14px;
    }

    body tag {
        font-family: Roboto;
        font-weight: 500;
        font-size: 18px;
    }

    body card-tag {
        font-family: Roboto;
        font-weight: 400;
        font-size: 12px;
    }

    /* --- */
    #main-wrapper {
        position: relative;
    }

    .overflow-wrapper {
        position: relative;
        overflow-x: hidden;
    }

    .full-bleed {
        grid-column: 1 / -1;
    }

    #home-page-w1920 {
        position: relative;
        max-width: 1920px;
        width: 100%;
        margin-inline: auto;
        height: auto;
        background: #121111;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        grid-auto-rows: minmax(0,auto);
        place-items: center;
        grid-template-areas: "header header header header header header header header"
          "hero hero hero hero hero hero hero hero"
          "team-spirit team-spirit team-spirit team-spirit team-spirit team-spirit team-spirit team-spirit"
          "design-team design-team design-team design-team design-team design-team design-team design-team"
          "custom-design custom-design custom-design custom-design custom-design custom-design custom-design custom-design"
          "meet-teams meet-teams meet-teams meet-teams meet-teams meet-teams meet-teams meet-teams"
          "why-cake why-cake why-cake why-cake why-cake why-cake why-cake why-cake"
          "shoutout shoutout shoutout shoutout shoutout shoutout shoutout shoutout"
          "footer footer footer footer footer footer footer footer";
    }

    .grid-area-header {
        grid-area: header;
        position: relative;
        place-content: center;
        background-color: var(--black);
    }

    .grid-area-hero {
        grid-area: hero;
        position: relative;
        place-content: center;
        background-color: var(--black);
    }

    .grid-area-team-spirit {
        grid-area: team-spirit;
        position: relative;
        place-content: center;
        background-color: var(--black);
    }

    .grid-area-design-team {
        grid-area: design-team;
        position: relative;
        place-content: center;
        transform: translateY(-9%);
        background-color: var(--black);
    }

    .grid-area-custom-design {
        grid-area: custom-design;
        position: relative;
        place-content: center;
        background-color: var(--black);
    }

    .grid-area-meet-teams {
        grid-area: meet-teams;
        position: relative;
        place-content: center;
        background-color: var(--black);
    }

    .grid-area-why-cake {
        grid-area: why-cake;
        position: relative;
        place-content: center;
        background-color: var(--black);
    }

    .grid-area-shoutout {
        grid-area: shoutout;
        position: relative;
        place-content: center;
        background-color: var(--black);
    }

    .grid-area-footer {
        grid-area: footer;
        position: relative;
        place-content: center;
        background-color: var(--black);
    }

    .two-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .three-columns {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: 1fr;
    }

    .four-columns {
        display: grid;
        grid-template-columns: repeat(4,1fr);
    }

    .five-columns {
        display: grid;
        grid-template-columns: repeat(5,1fr);
    }

    .layer-4 {
        z-index: 100;
    }

    .layer-3 {
        z-index: 50;
    }

    .layer-2 {
        z-index: 25;
    }

    .layer-1 {
        z-index: 1;
    }

    .layer--1 {
        z-index: -1;
    }

    .flex-center {
        display: flex;
        justify-content: center;
    }

    #home-page-v2 {
        width: 100%;
        left: 0px;
        top: 0px;
        background: #121111;
    }

    #hero-planet {
        grid-area: 1 / 2 / 2 / 2;
        justify-self: center;
        align-self: start;
        transform: translateX(-76%);
        width: 510px;
        aspect-ratio: 1;
    }

    .planet-overlay {
        position: relative;
        width: 500px;
        height: 500px;
        overflow: hidden;
    }

    .planet {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* keyframes */
    @keyframes rotateAnimation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    #hero-planet img {
        animation: rotateAnimation 30s linear infinite;
    }

    @keyframes scrollText {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    .overflow-wrapper {
        overflow: hidden;
        box-sizing: border-box;
        width: 100%;
        white-space: nowrap;
    }

    .overflow-wrapper h2 {
        display: block;
        white-space: nowrap;
        animation: scrollText 10s linear infinite;
    }

    /* end keyframes */
    #vector__vector-48 {
        width: 194.86357373096084;
        height: 116.59909211035506;
        border-width: 2px;
        grid-area: 2 / 4 / 2 / 4;
        transform: translateY(95%);
    }

    #group__frame-318--png-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0px;
        width: 366px;
        height: 522px;
        gap: 20px;
        grid-area: 3 / 4 / 3 / 4;
        transform: translateY(45%);
    }

    #png__spirit {
        transform: translateY(-4.5%) translateX(-9%);
        grid-area: 1 / 3 / 5 / 3;
    }

    #group__frame-300--heading-text-button {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 14px;
        width: 528px;
        height: 252px;
        grid-area: 2 / 2 / 2 / 2;
        justify-self: center;
        align-self: start;
        transform: translateX(-58%) translateY(-145%);
    }

    #vector-5__line-1 {
        width: 1054.5px;
        grid-area: 1 / 1 / 1/ 1;
    }

    #group__strava-social {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0px;
        gap: 29px;
        width: 1160px;
        height: 137px;
        grid-area: 2 / 2 / 4 / 2;
    }

    #group__group-126--rotating-circle {
        grid-area: 1 / 3 / 1 / 3;
    }

    #group__frame-307--custom-design {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 35px;
        width: 416px;
        height: 228px;
        gap: 35px;
        grid-area: 1 / 4 / 1 / 4;
    }

    #group__frame-306--ready-made-design {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 35px;
        width: 458px;
        height: 419px;
        grid-area: 3 / 2 / 3 / 2;
        transform: translateY(55%);
    }

    #text__discover-our-team {
        width: 263;
        height: 54;
        opacity: 0.5;
        color: #FFFFFF;
        opacity: 0.5;
        grid-area: 2 / 4 / 2 / 4;
    }

    #team-cards {
        width: 100%;
        grid-area: 2 / 1 / 2 / 5;
    }

    #frame-308 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 14px;
        gap: 14px;
        grid-area: 1 / 2 / 1 / 5;
    }

    #frame-311 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 57px;
        height: 495.22px;
        grid-area: 1 / 2 / 1 / 4;
    }

    #make-section-paralax {
        width: 100%;
        height: 934px;
        grid-area: 4 / 5 / 4 / 6;
        transform: translateX(45%);
    }

    #contact-form {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0px;
        gap: 86px;
        width: 100%;
        height: 214px;
        grid-area: 2/3/3/5;
    }

    #footer {
        width: 100%;
        grid-area: 3/2/3/4;
    }

    #belt-8 {
        width: 100%;
        height: 122px;
        grid-area: 1/1/1/6;
    }

    #belt-7 {
        width: 100%;
        height: 122px;
        grid-area: 1 / 1 / 1 / 6;
    }

    #vector__vector-11--line-2 {
        grid-area: 1 / 6 / 5 / 6;
    }

    #logo-1 {
        width: 364px;
        height: 364px;
        opacity: 0.1;
        grid-area: 2 / 2 / 2 / 2;
    }

    #top-menu {
        position: relative;
        width: 100%;
    }

    #status-bar {
        height: 5px;
        grid-area: 1 / 3 / 1 / 5;
        width: 200px;
    }

    #arrows {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0px;
        gap: 1059px;
        grid-area: 1 / 3 / 1 / 4;
    }

    .button-wrapper {
        grid-area: 3 / 3 / 3 / 3;
        display: flex;
        justify-content: center;
    }

    .planet-wrapper {
        grid-column: 2;
        transform: translateX(-48%) translateY(-145%);
    }

    .button-blue--standard {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 20px 30px;
        gap: 10px;
        width: 286px;
        background-color: #0038FF;
        border-radius: 35px;
        color: var(--text-white);
    }

    .button-blue {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 20px 30px;
        gap: 10px;
        background-color: #0038FF;
        border-radius: 35px;
    }

    .button-lined {
        width: 220px;
        height: 62px;
        gap: 10px;
        border-width: 1px;
        border-radius: 35px;
        padding-top: 20px;
        padding-right: 30px;
        padding-bottom: 20px;
        padding-left: 30px;
        grid-area: 5 / 2 / 5 / 2;
    }

    #navigation-bar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0px;
        gap: 1059px;
        position: relative;
        height: 56px;
        grid-area: 1 / 3 / 1 / 5;
    }

    .shirt-rotation {
        grid-area: 1 / 3 / 1 / 4;
        display: flex;
        justify-content: center;
    }

    .item-1 {
        height: 509px;
    }

    .item-2 {
        height: 509px;
        display: none;
    }

    .item-3 {
        height: 509px;
        display: none;
    }

    #go-to-store {
        font-style: normal;
        font-weight: 500;
        font-size: 24px;
        line-height: 34px;
        text-transform: uppercase;
        color: #FFFFFF;
    }

    #text__at-cake {
        width: 293px;
        height: 72px;
        grid-area: 2 / 3 / 2 / 3;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 130%;
        color: #A9A9A9;
    }

    .socials {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 0px;
        gap: 30px;
        width: 150px;
        height: 30px;
        grid-area: 2 / 4 / 2 / 4;
        align-self: end;
    }

    #celebrate-the-team {
        position: relative;
        display: flex;
        height: 372px;
        text-transform: capitalize;
        text-align: center;
        z-index: -1;
        grid-area: 1 / 2 / 1 /5;
    }

    .hero-shirt {
        grid-column: 5;
        position: relative;
        display: flex;
        justify-content: center;
    }
}

/* end main styles */
}
    }
}