body:has(.homepage-v3) {
  overflow-x: clip;
}

body:has(.homepage-v3) .header {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
}

.homepage-container .hero-home {
  border: none;
  border-radius: 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}

.homepage-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-large);
}

.four-column .why-boost-cards__grid {
    grid-template-columns: repeat(4, 1fr);
}

.card-masonry-top {
    padding-bottom: var(--space-large);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "a c d"
        "b c d"
        "b c e"
        "b c e"
        "b c e"
    ;
    row-gap: var(--space-card);
    column-gap: var(--space-card);
}

.card-masonry-top .item-a {
    grid-area: a;
}

.card-masonry-top .item-b {
    grid-area: b;
}

.card-masonry-top .item-c {
    grid-area: c;
}

.card-masonry-top .item-d {
    grid-area: d;
}

.card-masonry-top .item-e {
    grid-area: e;
}

.card-masonry-top .item-f {
    display: none;
}

.card-masonry-bottom {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
        "a a a c c c"
        "b b d d d d";
    row-gap: var(--space-card);
    column-gap: var(--space-card);
}

.card-masonry-bottom .card-group {
  max-width: 100%;
  width: 100%;
}

.license-card .horizontal-card {
  max-width: 100%;
}

@media (min-width: 768px) {
  .license-card .horizontal-card {
    min-height: 358px;
  }

  .license-card .horizontal-card .horizontal-card__image {
    flex: 0 0 205px;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 1279px) {
  .responsive-limit-5-items .stats__bar-wrap:nth-child(n+6) {
    display: none;
  }
}


@media (min-width: 768px) and (max-width: 1279px) {
    .responsive-limit-3-items .card-group__item:nth-child(n+4) {
        display: none;
    }

    .responsive-limit-2-items .card-group__item:nth-child(n+3) {
        display: none;
    }

    .homepage-container {
      max-width: 1024px;
    }

    .search-card {
      max-width: 100%;
    }

    .homepage-join-card .card-group {
      max-width: 100%;
    }

    .card-masonry-top {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "a f"
            "a c"
            "d c"
            "e c"
            "e b"
            "e b"
            "e ."
        ;
    }

    .card-masonry-top .item-f {
      display: contents;
      grid-area: f;
    }

    .card-masonry-bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "a c"
            "b d";
    }

    .card-masonry-bottom > div {
        min-width: 0;
    }

    .card-masonry-bottom > div > * {
        max-width: 100%;
    }

    .four-column .why-boost-cards__grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .four-column .why-boost-cards__grid > * {
        grid-column: span 2;
    }

    .four-column .why-boost-cards__grid > :nth-last-child(2):nth-child(3n+1),
    .four-column .why-boost-cards__grid > :last-child:nth-child(3n+2) {
        grid-column: span 3;
    }

    .four-column .why-boost-cards__grid > :last-child:nth-child(3n+1) {
        grid-column: span 6;
    }
}

@media (max-width: 767px) {
    .homepage-container .hero-home {
      padding-left: var(--space-default);
      padding-right: var(--space-default);
    }

    .homepage-container {
      max-width: 485px;
      padding: 0 var(--space-medium);
    }

    .four-column .why-boost-cards__grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .card-masonry-top {
        grid-template-columns: 1fr;
        grid-template-areas:
            "a"
            "f"
            "c"
            "d"
            "b"
            "e"
        ;
    }

    .card-masonry-bottom {
        grid-template-columns: 1fr;
        grid-template-areas:
            "a"
            "c"
            "b"
            "d"
        ;
    }

    .card-masonry-bottom > div {
        min-width: 0;
    }

    .card-masonry-top .item-f {
      display: contents;
      grid-area: f;
    }
}

.card-masonry-bottom .item-a {
    grid-area: a;
    display: flex;
}

.card-masonry-bottom .item-a .stats {
    flex: 1;
}

.card-masonry-bottom .item-b {
    grid-area: b;
}

.card-masonry-bottom .item-c {
    grid-area: c;
}

.card-masonry-bottom .item-d {
    grid-area: d;
}