.tabbed-section-container {
  max-width: 100rem;
  margin: auto;
}

.tabbed-container {
  aspect-ratio: 355 / 197;
  position: relative;
  z-index: 98;
}

.tabbed-item-wrapper{
  color: #262B33;
  display: grid;
  grid-template-columns: repeat(12,1fr);
  gap: 0rem;
  position: absolute;
  height: 100%;
  z-index: 0;
  border-radius: 1rem;
  overflow: hidden; 
}

.tabbed-section-visual {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
}

.tabbed-section-detail {
  grid-column: 8 / 11;
  align-self: center;
  color: #fff;
  -webkit-font-smoothing: antialiased; {# macOS only #}
  -moz-osx-font-smoothing: grayscale; {# macOS only #}
}

.tabbed-section-detail .eyebrow,
.tabbed-section-detail h1,
.tabbed-section-detail h2,
.tabbed-section-detail h3,
.tabbed-section-detail h4 {
  color: #fff;
}

.tabbed-section-detail .eyebrow {
  color: #fff;
  font-weight: normal;
  font-size: .75rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.tabbed-section-detail .eyebrow-icon {
  display: block;
  max-width: 1.25rem;
  height: auto;
}

.tabbed-variable-image-container img {
    width: 100%;
    display: block;
}

.tabbed-item-wrapper:not([data-tabbed-state="active"]){
   opacity: 0;
   z-index: -1;
   overflow: hidden;
   transition: opacity .1s linear;
}
.tabbed-nav-track-wrap {
  position: relative;
  z-index: 99;
  margin:0 auto -1.5rem;
  height: auto;
  overflow-x: scroll;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.tabbed-nav-track [data-tabbed-control] {
  font-size: .9375rem;
  padding: .625rem;
  line-height: 1.2;
  border-radius: 4rem;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}

.tabbed-nav-track [data-tabbed-control]:first-of-type {
    padding-left: 1.2rem ;
}

.tabbed-nav-track [data-tabbed-control]:last-of-type {
    padding-right: 1.2rem ;
}


.tabbed-nav-track [data-tabbed-control]::after {
  content: '';
  display: block;
  background: transparent;
  height: 100%;
  width: 100%;
  position: absolute;
  flex: 0;
  border-radius: 4rem;
  z-index: -1;
  transition: background .15s ease;
}
.tabbed-nav-track [data-tabbed-control][data-tabbed-state=active] {
  color: var(--via-remix-blue);
}

.tabbed-nav-track [data-tabbed-control]:not([data-tabbed-state=active]):hover {
  color: var(--via-remix-blue);
  transition: color .15s ease;
}

.tabbed-nav-track [data-tabbed-control][data-tabbed-state=active]::after {
  background: #EDF6FF;
  transition: background .15s ease;
  width: calc(100% + .625rem);
}

.tabbed-nav-track {
  background: #fff;
  border: .5px solid #efefef;
  border-radius: 4rem;
  display: flex;
  justify-content: center;
  gap: .25rem;
  padding: 4px;
  height: 3rem;
  width: fit-content;;
  border-radius: 3.125rem;
  {#box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05), 0px 6px 20px 0px rgba(0, 0, 0, 0.12);#}
  width: fit-content;
  overscroll-behavior: none;
  position: relative;
  z-index: 0;
  margin: auto;
}

.tabbed-resource-tile {
    background: #fff;
    color: #10151D;
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.45;
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-right: 1rem;
    border-radius: 1rem 0.125rem;
    overflow: hidden;
    max-width: 23.25rem;

}
.tabbed-resource-link {
  text-decoration: none;
}

.tabbed-detail-more::before {
  content: '';
  display: block;
  height: .5px;
  background: #fff;
  opacity: .5;
  margin: 2.45rem auto;
}

.tabbed-resource-tile img {
    display: block;
    line-height: 1;
    aspect-ratio: 15 /11;
    max-width: 5.625rem;
    border-radius: 0.625rem 0.125rem;
}

.tabbed-resource-tile .tile__content {
    padding: .5rem 0;
}

@media (max-width: 1200px) {
  .tabbed-section-detail {
    grid-column: 8 / 12;
    padding-right: 3%;
  }
}

@media (max-width: 990px) {
  .tabbed-container {
    aspect-ratio: unset;
    min-height: 49rem;
  }

  .tabbed-section-visual > div {
    position: relative;
    top: 0;
    left: 0;
    bottom: unset;
    right: unset;
  }

  .tabbed-section-detail {
    grid-column: 3 / 10;
    padding-right: unset;
  }
  
  .tabbed-section-visual {
    position: relative;
    display: block;
    width: 100%;
    grid-row: 1 / 2;
    grid-column: 1 / -1;
    z-index: -2;
  }

  .tabbed-item-wrapper {
    background: #000;
    grid-template-rows: 21.5rem auto;
  }

  .tabbed-item-wrapper:before {
      content: '';
      background: #000;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 38%, #000 54%);
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      grid-row: 1 / auto;
      grid-column: 1 / auto;
      z-index: -1;
  }
}

@media (max-width: 780px) {
  .tabbed-nav-track-wrap {
    padding: 0 .75rem;
  }
  .tabbed-item-wrapper:before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 30%, #000 45%);
  }
  .tabbed-item-wrapper {
    grid-template-rows: 18rem auto;
  }
  .tabbed-variable-image-container img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
}

@media (max-width: 520px) {
  .tabbed-item-wrapper:before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 25%, #000 33%);
  }
  .tabbed-item-wrapper {
    grid-template-rows: 13.5rem auto;
  }
  .tabbed-container {
    aspect-ratio: unset;
    min-height: 46rem;
  }

  .tabbed-section-detail {
    grid-column: 2 / 12;
  }
}