.home-card-grid--three,
.home-card-grid--four,
.home-collection-grid,
.contact-main__grid,
.contact-cta__panel,
.chess-world__grid,
.chess-event-grid,
.chess-content-grid,
.chess-gallery__grid,
.chess-optional-panel__items,
.chess-upcoming__list,
.about-origin__grid,
.about-interests__grid,
.about-gallery__grid,
.about-timeline__track {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .home-intro__grid,
  .home-community__panel,
  .contact-main__grid,
  .contact-cta__panel,
  .chess-split,
  .chess-cta__panel,
  .about-split,
  .about-community__grid,
  .about-cta__panel,
  .about-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .home-card-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chess-world__grid,
  .chess-content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chess-event-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chess-gallery__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .chess-gallery__item--wide {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 100%;
  }

  .chess-optional-panel__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chess-upcoming__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chess-classes__panel {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) auto;
  }

  .chess-classes__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-card-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-origin__grid,
  .about-interests__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-gallery__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .about-gallery__item--tall {
    grid-column: span 2;
    grid-row: span 2;
  }

  .about-timeline__track {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    position: relative;
  }

  .about-timeline__track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 1.1rem;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 99, 182, 0.18), rgba(127, 79, 219, 0.34), rgba(255, 99, 182, 0.18));
  }

  .about-timeline__item {
    position: relative;
  }

  .about-timeline__item::before {
    content: "";
    position: absolute;
    left: calc(50% - 0.4rem);
    top: 2.3rem;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-brand-pink), var(--color-brand-violet));
    box-shadow: 0 0 0 0.25rem rgba(255, 99, 182, 0.12);
  }

  .about-timeline__item::before {
    left: calc(50% - 0.5rem);
    top: 4.55rem;
    width: 1rem;
    height: 1rem;
    background: var(--timeline-accent);
    box-shadow: 0 0 0 0.26rem rgba(255, 255, 255, 0.82);
  }

  .about-timeline__item::after {
    content: "";
    position: absolute;
    left: calc(50% - 1px);
    top: 2.95rem;
    width: 2px;
    height: 1.6rem;
    background: var(--timeline-accent);
  }

  .about-timeline__particle--one {
    top: 10%;
    right: 10%;
  }

  .about-timeline__particle--two {
    top: 22%;
    right: 8%;
  }

  .about-timeline__particle--three {
    top: 42%;
    left: 18%;
  }

  .about-timeline__particle--four {
    top: 16%;
    left: 72%;
  }

  .about-timeline__particle--five {
    top: 74%;
    right: 14%;
  }

  .about-timeline__particle--six {
    top: 70%;
    left: 8%;
  }

  .about-timeline__particle--seven {
    top: 28%;
    left: 66%;
  }

  .about-timeline__particle--eight {
    top: 86%;
    right: 12%;
  }

  .about-timeline__particle--nine {
    top: 18%;
    left: 14%;
  }

  .about-timeline__particle--ten {
    top: 34%;
    right: 20%;
  }

  .about-timeline__particle--eleven {
    top: 60%;
    left: 22%;
  }

  .about-timeline__particle--twelve {
    top: 82%;
    right: 26%;
  }

  .about-community__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-intro__grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }

  .home-shop__brand {
    flex-wrap: nowrap;
  }
}

@media (min-width: 1024px) {
  .contact-main__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }

  .contact-cta__panel {
    grid-template-columns: 1fr;
  }

  .home-intro__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .home-intro__copy {
    padding-right: 0.25rem;
  }

  .home-hero__grid {
    grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);

  }

  .chess-hero__grid {
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  }

  .about-hero__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr);

  }

  .about-split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .about-split--reverse > :first-child {
    order: 2;
  }

  .about-split--reverse > :last-child {
    order: 1;
  }

  .home-card-grid--four,
  .home-collection-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-card-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chess-world__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .chess-content-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .home-shop__heading h2 {
    max-width: 14ch;
  }

  .home-shop__card {
    padding-inline: 0.95rem;
  }

  .home-product-card__media.home-shop__media {
    min-height: 13.5rem;
  }

  .home-collections {
    background-position: 58% center;
  }

  .home-collections__logo-image {
    width: min(100%, 15.5rem);
  }

  .home-collection-card {
    grid-template-columns: clamp(4rem, 20vw, 5rem) minmax(0, 1fr);
    min-height: 7.5rem;
    padding: 0.85rem 1rem 0.85rem 0.75rem;
  }

  .home-shop__media img {
    height: 12.5rem;
  }

  .btn {
    width: 100%;
  }

  .home-intro {
    padding-block: 2rem 2.35rem;
    background-position: 62% center;
  }

  .home-intro__grid {
    gap: 1.5rem;
  }

  .home-pillars {
    margin-top: -1rem;
    padding-top: 1.85rem;
    padding-bottom: 2.5rem;
    background-position: center top;
  }

  .home-pillars .home-section__heading {
    margin-bottom: 1.5rem;
  }

  .home-pillars__title {
    gap: 0.35rem 0.55rem;
  }

  .home-pillars__title-crown {
    width: 1.45rem;
  }

  .home-pillars__title-lead,
  .home-pillars__title-script {
    display: block;
  }

  .home-pillars .home-feature-card {
    padding: 1.25rem;
  }

  .home-pillars .home-feature-card__icon {
    width: 3.85rem;
    height: 3.85rem;
  }

  .home-intro__media,
  .home-intro__copy {
    justify-self: center;
    width: 100%;
  }

  .home-intro__photo {
    aspect-ratio: 0.9;
    min-height: 18rem;
  }

  .home-intro__copy {
    justify-items: center;
    text-align: center;
  }

  .home-intro__copy p {
    max-width: 36ch;
    font-size: 1.05rem;
  }

  .home-intro__cta {
    justify-self: stretch;
  }

  .home-intro__particle--one {
    top: 10%;
    right: 10%;
  }

  .home-intro__particle--two {
    top: 22%;
    right: 8%;
  }

  .home-intro__particle--three {
    top: 42%;
    left: 18%;
  }

  .home-intro__particle--four {
    top: 16%;
    left: 72%;
  }

  .home-intro__particle--five {
    top: 74%;
    right: 14%;
  }

  .home-intro__particle--six {
    top: 70%;
    left: 8%;
  }

  .home-intro__particle--seven {
    top: 28%;
    left: 66%;
  }

  .home-intro__particle--eight {
    top: 86%;
    right: 12%;
  }

  .home-intro__particle--nine {
    top: 18%;
    left: 14%;
  }

  .home-intro__particle--ten {
    top: 34%;
    right: 20%;
  }

  .home-intro__particle--eleven {
    top: 60%;
    left: 22%;
  }

  .home-intro__particle--twelve {
    top: 82%;
    right: 26%;
  }

  .about-story__particle--one {
    top: 10%;
    right: 10%;
  }

  .about-story__particle--two {
    top: 22%;
    right: 8%;
  }

  .about-story__particle--three {
    top: 42%;
    left: 18%;
  }

  .about-story__particle--four {
    top: 16%;
    left: 72%;
  }

  .about-story__particle--five {
    top: 74%;
    right: 14%;
  }

  .about-story__particle--six {
    top: 70%;
    left: 8%;
  }

  .about-story__particle--seven {
    top: 28%;
    left: 66%;
  }

  .about-story__particle--eight {
    top: 86%;
    right: 12%;
  }

  .about-story__particle--nine {
    top: 18%;
    left: 14%;
  }

  .about-story__particle--ten {
    top: 34%;
    right: 20%;
  }

  .about-story__particle--eleven {
    top: 60%;
    left: 22%;
  }

  .about-story__particle--twelve {
    top: 82%;
    right: 26%;
  }

  .about-journey__particle--one {
    top: 10%;
    right: 10%;
  }

  .about-journey__particle--two {
    top: 22%;
    right: 8%;
  }

  .about-journey__particle--three {
    top: 42%;
    left: 18%;
  }

  .about-journey__particle--four {
    top: 16%;
    left: 72%;
  }

  .about-journey__particle--five {
    top: 74%;
    right: 14%;
  }

  .about-journey__particle--six {
    top: 70%;
    left: 8%;
  }

  .about-journey__particle--seven {
    top: 28%;
    left: 66%;
  }

  .about-journey__particle--eight {
    top: 86%;
    right: 12%;
  }

  .about-journey__particle--nine {
    top: 18%;
    left: 14%;
  }

  .about-journey__particle--ten {
    top: 34%;
    right: 20%;
  }

  .about-journey__particle--eleven {
    top: 60%;
    left: 22%;
  }

  .about-journey__particle--twelve {
    top: 82%;
    right: 26%;
  }

  .home-hero {
    min-height: 0;
    padding: 2rem 20px 2.5rem;
  }

  .home-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 30rem;
    width: 100%;
  }

  .home-hero__content {
    grid-template-columns: minmax(0, 1fr);
    justify-self: stretch;
    justify-items: center;
    text-align: center;
    width: min(100%, 34rem);
    max-width: 100%;
    margin: 0;
    transform: none;
  }

  .home-hero__title {
    width: 100%;
    max-width: none;
    justify-items: stretch;
    text-align: center;
  }

  .home-hero__title-accent {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: clamp(1.45rem, 7vw, 2rem);
    white-space: normal;
  }

  .home-hero__copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .home-hero__actions {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .home-hero__cta {
    width: min(100%, 20rem);
    min-width: 0;
  }

  .home-hero__media-layer {
    background: image-set(
      url("../img/home/hero/hero-home-bg-mobile.png") type("image/png") 1x
    );
    background-position: 64% center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .home-hero__stage {
    display: none;
  }

  .contact-hero__panel {
    aspect-ratio: auto;
    min-height: 18rem;
    padding: 1.75rem 1.5rem;
    background-position: center top;
  }

  .contact-card,
  .contact-cta__panel {
    padding-inline: 1.25rem;
  }

  .contact-whatsapp-btn {
    width: 100%;
  }

  .contact-info-item {
    grid-template-columns: 1fr;
  }

  .contact-form__submit,
  .contact-cta__actions,
  .contact-cta__actions .btn {
    width: 100%;
  }

  .home-hero__piece-slot--top-right {
    top: 12%;
    right: 4%;
  }

  .home-hero__piece-slot--bottom-right {
    right: 0;
    bottom: 20%;
  }

  .home-hero__piece-slot--left {
    left: -3%;
    top: 18%;
  }

  .home-community__panel {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    min-height: auto;
    padding-block: 2rem;
  }

  .home-community {
    background-position: 58% center;
  }

  .home-community__copy,
  .home-community__social {
    justify-items: center;
    text-align: center;
  }

  .home-community__copy {
    padding-right: 0;
  }

  .home-community__social {
    width: 100%;
    padding-top: 1.25rem;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.38);
  }

  .home-community__title {
    font-size: clamp(2rem, 12vw, 3rem);
    white-space: normal;
  }

  .home-community__copy p {
    max-width: 31ch;
  }

  .home-social-card__list {
    justify-content: center;
  }

  .chess-hero {
    padding-top: 2rem;
    background-position: 64% center;
  }

  .chess-hero__grid {
    min-height: 29rem;
  }

  .chess-hero__content {
    justify-items: center;
    text-align: center;
    max-width: none;
  }

  .chess-hero__tagline {
    max-width: 12ch;
  }

  .chess-hero__actions {
    width: 100%;
  }

  .chess-hero__cta {
    width: 100%;
  }

  .chess-photo-card {
    min-height: 16rem;
  }

  .chess-vision {
    background-position: center top;
    background-size: contain;
  }

  .chess-vision__title-line {
    flex-wrap: wrap;
    white-space: normal;
  }

  .chess-world {
    background-position: center center;
    background-size: 100% auto;
  }

  .chess-world__title-line {
    gap: 0.5rem;
  }

  .chess-world__title-copy {
    justify-content: center;
  }

  .chess-events {
    background-position: center top;
    background-size: 96% auto;
  }

  .chess-events__title-line {
    gap: 0.5rem;
  }

  .chess-events__title-copy {
    justify-content: center;
  }

  .chess-content {
    background-position: center center;
    background-size: 100% 100%;
  }

  .chess-content__title-line {
    gap: 0.5rem;
  }

  .chess-content__title-copy {
    justify-content: center;
  }

  .chess-content-card {
    grid-template-columns: 1fr;
  }

  .chess-event-card__media,
  .chess-content-card__media,
  .chess-gallery__item {
    min-height: 0;
    height: auto;
    overflow: hidden;
  }

  .chess-event-card__media,
  .chess-content-card__media {
    aspect-ratio: 4 / 3;
  }

  .chess-event-card__media img,
  .chess-content-card__media img,
  .chess-gallery__item img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .chess-gallery__item {
    padding: 0;
  }

  .chess-gallery__item--wide {
    min-height: 0;
  }

  .chess-classes__intro,
  .chess-classes__action {
    justify-items: center;
    text-align: center;
  }

  .chess-classes__heading-row,
  .chess-classes__title {
    justify-content: center;
  }

  .chess-classes__heading-copy {
    justify-items: center;
  }

  .chess-classes__brand {
    justify-items: center;
  }

  .chess-gallery {
    background-position: center center;
    background-size: contain;
  }

  .chess-gallery__title-line {
    gap: 0.5rem;
  }

  .chess-gallery__title-copy {
    justify-content: center;
  }

  .chess-optional-panel,
  .chess-upcoming__panel,
  .chess-cta__panel {
    padding-inline: 1.5rem;
  }

  .chess-cta__panel {
    border-radius: calc(var(--radius-lg) + 0.4rem) calc(var(--radius-lg) + 0.4rem) 0 0;
  }

  .about-hero {
    padding-top: 2rem;
  }

  .about-photo-card,
  .about-photo-card--hero {
    min-height: 16rem;
  }

  .about-community__tile,
  .about-gallery__item {
    min-height: 0;
    height: auto;
    overflow: hidden;
  }

  .about-community__tile img,
  .about-gallery__item img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .about-gallery__item--tall {
    min-height: 0;
  }

  .about-story__title-line {
    gap: 0.28rem;
  }

  .about-story__title-mi,
  .about-story__title-lead {
    font-size: clamp(1.12rem, 4.8vw, 1.5rem);
  }

  .about-story__title-script {
    font-size: clamp(1.36rem, 5.6vw, 1.85rem);
  }

  .about-story__crown {
    width: 1.55rem;
  }

  .about-journey__title-line {
    gap: 0.28rem;
  }

  .about-journey__title-mi,
  .about-journey__title-lead {
    font-size: clamp(1.12rem, 4.8vw, 1.5rem);
  }

  .about-journey__title-script {
    font-size: clamp(1.36rem, 5.6vw, 1.85rem);
  }

  .about-journey__crown {
    width: 1.55rem;
  }

  .about-origin__title-line {
    gap: 0.32rem;
  }

  .about-origin__title-lead {
    font-size: clamp(1.08rem, 4.6vw, 1.45rem);
  }

  .about-origin__title-logo {
    width: clamp(7.4rem, 36vw, 10rem);
  }

  .about-origin__crown {
    width: 1.55rem;
  }

  .about-timeline__title-line {
    gap: 0.28rem;
  }

  .about-timeline__title-lead {
    font-size: clamp(1.12rem, 4.8vw, 1.5rem);
  }

  .about-timeline__crown {
    width: 1.55rem;
  }

  .about-community__title-line {
    gap: 0.3rem 0.45rem;
  }

  .about-community__title-lead {
    font-size: clamp(1.08rem, 4.6vw, 1.45rem);
  }

  .about-community__title-script {
    font-size: clamp(1.45rem, 6vw, 2rem);
  }

  .about-community__crown {
    width: 1.55rem;
  }

  .about-community__lichess-link {
    max-width: min(100%, 12.5rem);
  }

  .about-interests__title-line {
    gap: 0.3rem 0.45rem;
  }

  .about-interests__title-lead {
    font-size: clamp(1.08rem, 4.6vw, 1.45rem);
  }

  .about-interests__title-script {
    font-size: clamp(1.45rem, 6vw, 2rem);
  }

  .about-interests__crown {
    width: 1.55rem;
  }

  .about-gallery__title-line {
    gap: 0.3rem 0.45rem;
  }

  .about-gallery__title-lead {
    font-size: clamp(1.08rem, 4.6vw, 1.45rem);
  }

  .about-gallery__title-script {
    font-size: clamp(1.45rem, 6vw, 2rem);
  }

  .about-gallery__crown {
    width: 1.55rem;
  }

  .about-origin__title-logo {
    margin-bottom: 0.12rem;
  }

  .about-community__grid,
  .about-cta__panel {
    padding-inline: 1.5rem;
  }

  .about-cta__panel {
    border-radius: calc(var(--radius-lg) + 0.4rem) calc(var(--radius-lg) + 0.4rem) 0 0;
  }

  .about-cta__copy,
  .about-cta__actions {
    justify-items: center;
    text-align: center;
  }

  .about-cta__copy p {
    font-size: 0.9rem;
  }

  .about-cta__buttons,
  .about-cta__social-row {
    justify-content: center;
  }

  .about-cta__social-label {
    width: 100%;
  }

  .about-cta__copy-line {
    white-space: normal;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .home-card-grid--four.home-shop__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .home-intro__grid {
    align-items: end;
  }

  .home-intro__copy {
    max-width: 34rem;
  }

  .home-hero__grid {
    min-height: 38rem;
  }

  .home-hero__media-layer {
    background: image-set(
      url("../img/home/hero/hero-home-bg-tablet.png") type("image/png") 1x
    );
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .home-hero__content {
    max-width: 34rem;
  }
}
