@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,112.5,300;1,112.5,300&family=Lato:wght@300&display=swap');
  
  :root {
    --gray-01: #222;
    --gray-02: #3c3c3c;
    --white: white;
    --brand: #bafc9d;
    --black: #000;
  }
  
  .dp-tag_component {
    background-image: linear-gradient(49deg, var(--gray-01), var(--gray-02));
    font-family: Archivo, Arial, sans-serif;
    color: var(--white);
    letter-spacing: -.03em;
    border-radius: 1.125rem;
    width: 100%;
    height: 4.125rem;
    padding: .5rem 2.625rem;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
    display: block;
    position: relative;
    overflow: hidden;
  }
  
  .dp-tag_noise {
    z-index: 1;
    mix-blend-mode: color-burn;
    background-image: url('https://f1ebb1e4b892f04c.cdn.express/dp-tag/images/dp-tag-noise.png');
    background-position: 0 0;
    background-size: 16rem 16rem;
    position: absolute;
    inset: 0%;
  }
  
  .dp-tag_circle {
    z-index: 2;
    aspect-ratio: 1;
    width: 200%;
    max-width: none;
    position: absolute;
    inset: 0% auto auto -100%;
  }
  
  .dp-tag_content {
    z-index: 3;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-rows: auto;
    grid-template-columns: .5fr 1fr .5fr;
    grid-auto-columns: 1fr;
    align-items: center;
    width: 100%;
    height: 100%;
    display: grid;
    position: relative;
  }
  
  .dp-tag_logo {
    width: 2rem;
    height: 2rem;
    animation: colorLogo 11s ease-in-out infinite;
  }
 
  @keyframes colorLogo {
    0%, 10%   { color: white; }
    10%, 19% { color: black; }
    55%, 64% { color: white; }
  }
  
  .dp-tag_center-text {
    text-align: center;
    animation: colorCenter 11s ease-in-out infinite;
  }
  
  @keyframes colorCenter {
    0%, 28%   { color: white; }
    28%, 37% { color: black; }
    69%, 78% { color: white; }
  }
  
  .dp-tag_year-text {
    text-align: right;
    animation: colorYear 11s ease-in-out infinite;
  }
  
  @keyframes colorYear {
    0%, 42%   { color: white; }
    42%, 55% { color: black; }
    78%, 87% { color: white; }
  }
  
  .dp-tag_gradient {
    z-index: 2;
    background-image: linear-gradient(266deg, #bafc9d00 5%, var(--brand) 50%, #bafc9d00 95%);
    width: 200%;
    height: 100%;
    transition: opacity .3s;
    position: absolute;
    inset: 0% auto auto 0%;
    animation: moveGradient 11s linear infinite;
  }
  
  @keyframes moveGradient {
    0%   { transform: translateX(-100%); }
    45.5% { transform: translateX(-35%); }
    50% { transform: translateX(-35%); }
    95.5% { transform: translateX(50%); }
    100% { transform: translateX(50%); }
  }

  .dp-tag_hover {
    z-index: 2;
    background-color: var(--brand);
    opacity: 0;
    transition: opacity .3s;
    position: absolute;
    inset: 0%;
  }

  .dp-tag_component:hover .dp-tag_hover {
    opacity: 1;
}
.dp-tag_component:hover .dp-tag_gradient {
	opacity: 0;
}
.dp-tag_component:hover .dp-tag_logo {
	color: var(--gray-01)!important;
}
.dp-tag_component:hover .dp-tag_center-text {
	color: var(--gray-01)!important;
}
.dp-tag_component:hover .dp-tag_year-text {
	color: var(--gray-01)!important;
}
  
  @media screen and (max-width: 767px) {
    .dp-tag_component {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
      font-size: .875rem;
    }
  
    .dp-tag_circle {
      aspect-ratio: 1 / 2;
    }
  
    .dp-tag_content {
      grid-column-gap: 2rem;
      grid-row-gap: 2rem;
      grid-template-columns: 3.25rem 1fr 3.25rem;
    }
  }
  
  @media screen and (max-width: 479px) {
    .dp-tag_content {
      grid-column-gap: 1rem;
      grid-row-gap: 1rem;
    }
  }