.hero-container {
    max-width: 100%;
    display: flex;
    padding-top: 30px;
}

.hero-col-1 {
    width: 6%;
    background: conic-gradient(
    #31f2bb 90deg,
    #000000 90deg 180deg,
    #31f2bb 180deg 270deg,
    #000000 270deg
    );
    background-repeat: repeat ;
    background-size: 200px 200px;
    background-position: top left;
    box-shadow: 7.3px 14.6px 14.6px hsl(0deg 0% 0% / 0.27);
}

.hero-col-2 {
    width: 17%;
    font-family: "bebas-neue-pro-expanded", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-style: black;
    font-size: 2em;
    padding-left: .5em;
    line-height: 2em;
}

h1 {
    color: black;
    margin: 0;
}

.hero-col-3 {
    width: 77%;
    background: conic-gradient(
    #31f2bb 90deg,
    #000000 90deg 180deg,
    #31f2bb 180deg 270deg,
    #000000 270deg
    );
    background-repeat: repeat ;
    background-size: 200px 200px;
    background-position: top left;

    overflow: hidden;
    box-shadow: 7.3px 14.6px 14.6px hsl(0deg 0% 0% / 0.27);
}

@media (max-width: 480px) {
    .hero-col-1 {
        width: 5%;
        background: conic-gradient(
        #31f2bb 90deg,
        #000000 90deg 180deg,
        #31f2bb 180deg 270deg,
        #000000 270deg
        );
        background-repeat: repeat ;
        background-size: 130px 130px;
        background-position: top left;
    }
    
    .hero-col-2 {
        width: 20%;
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-style: black;
        font-size: 1.25em;
        padding-left: .5em;
        padding-right: 4em;
        line-height: 2em;
    }
    
    h1 {
        color: black;
        margin: 0;
    }
    
    .hero-col-3 {
        width: 70%;
        background: conic-gradient(
        #31f2bb 90deg,
        #000000 90deg 180deg,
        #31f2bb 180deg 270deg,
        #000000 270deg
        );
        background-repeat: repeat ;
        background-size: 120px 120px;
        background-position: top left;
    
        overflow: hidden;
    }
  }

@media (min-width: 480px) and (max-width: 679px) {
    .hero-col-1 {
        width: 5%;
        background: conic-gradient(
        #31f2bb 90deg,
        #000000 90deg 180deg,
        #31f2bb 180deg 270deg,
        #000000 270deg
        );
        background-repeat: repeat ;
        background-size: 120px 120px;
        background-position: top left;
    }
    
    .hero-col-2 {
        width: 20%;
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-style: black;
        font-size: 1.25em;
        padding-left: .5em;
        padding-right: 4em;
        line-height: 2em;
    }
    
    h1 {
        color: black;
        margin: 0;
    }
    
    .hero-col-3 {
        width:70%;
        background: conic-gradient(
        #31f2bb 90deg,
        #000000 90deg 180deg,
        #31f2bb 180deg 270deg,
        #000000 270deg
        );
        background-repeat: repeat ;
        background-size: 120px 120px;
        background-position: top left;
    
        overflow: hidden;
    }
  }

  @media (min-width: 680px) {
    .hero-col-1 {
        width: 4%;
        background: conic-gradient(
        #31f2bb 90deg,
        #000000 90deg 180deg,
        #31f2bb 180deg 270deg,
        #000000 270deg
        );
        background-repeat: repeat ;
        background-size: 195px 195px;
        background-position: top left;
    }
    
    .hero-col-2 {
        width: 25%;
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-style: black;
        font-size: 2em;
        padding-left: .5em;
        line-height: 2em;
        padding-right: 2em;
    }
    
    h1 {
        color: black;
        margin: 0;
    }
     
    .hero-col-3 {
        width:70%;
        background: conic-gradient(
        #31f2bb 90deg,
        #000000 90deg 180deg,
        #31f2bb 180deg 270deg,
        #000000 270deg
        );
        background-repeat: repeat ;
        background-size: 192px 192px;
        background-position: top left;
    
        overflow: hidden;
    }
  }


  @media (min-width: 900px) {
    .hero-col-1 {
        width: 4%;
        background: conic-gradient(
        #31f2bb 90deg,
        #000000 90deg 180deg,
        #31f2bb 180deg 270deg,
        #000000 270deg
        );
        background-repeat: repeat ;
        background-size: 195px 195px;
        background-position: top left;
    }
    
    .hero-col-2 {
        width: 15%;
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-style: black;
        font-size: 2em;
        padding-left: .5em;
        padding-right: 4em;
        line-height: 2em;
    }
    
    h1 {
        color: black;
        margin: 0;
    }
    
    .hero-col-3 {
        width:70%;
        background: conic-gradient(
        #31f2bb 90deg,
        #000000 90deg 180deg,
        #31f2bb 180deg 270deg,
        #000000 270deg
        );
        background-repeat: repeat ;
        background-size: 192px 192px;
        background-position: top left;
    
        overflow: hidden;
    }
  }

  @media (min-width: 1288px) {
    .hero-col-1 {
        width: 5%;
        background: conic-gradient(
        #31f2bb 90deg,
        #000000 90deg 180deg,
        #31f2bb 180deg 270deg,
        #000000 270deg
        );
        background-repeat: repeat ;
        background-size: 195px 195px;
        background-position: top left;
    }
    
    .hero-col-2 {
        width: 20%;
        font-family: "bebas-neue-pro-expanded", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-style: black;
        font-size: 2em;
        padding-left: .5em;
        line-height: 2em;
        padding-right: 3em;
    }
    
    h1 {
        color: black;
        margin: 0;
    }
    
    .hero-col-3 {
        width:80%;
        background: conic-gradient(
        #31f2bb 90deg,
        #000000 90deg 180deg,
        #31f2bb 180deg 270deg,
        #000000 270deg
        );
        background-repeat: repeat ;
        background-size: 192px 192px;
        background-position: top left;
    
        overflow: hidden;
    }
  }