@media (min-width: 768px) {
  .special-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    width: 100%;
  }

  .special-grid > .special-match-card-wrapper {
    flex: 0 0 420px;
    width: 420px;
    max-width: 420px;
  }

  .special-grid > :not(.special-match-card-wrapper) {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
}




@media (max-width: 767px) {
  .special-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    padding: 0 0px;
    box-sizing: border-box;
  }

  .special-grid > .card-wrapper,
  .special-grid > .special-match-card-wrapper {
    width: 343px;
    max-width: 100%;
  }
}