.ly-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
}

.ly-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ly-col-span-1 {
  grid-column: span 1 / span 1;
}

.ly-col-span-2 {
  grid-column: span 2 / span 2;
}

.ly-col-span-3 {
  grid-column: span 3 / span 3;
}

.ly-col-span-4 {
  grid-column: span 4 / span 4;
}

@media (min-width: 480px) and (max-width: 767px) {
  .ly-container {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .ly-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .ly-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 20px;
  }

  .ly-col-md-span-4 {
    grid-column: span 4 / span 4;
  }

  .ly-col-md-span-8 {
    grid-column: span 8 / span 8;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .ly-container {
    max-width: 1200px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .ly-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
  }

  .ly-col-lg-span-6 {
    grid-column: span 6 / span 6;
  }

  .ly-col-lg-span-4 {
    grid-column: span 4 / span 4;
  }

  .ly-col-lg-span-3 {
    grid-column: span 3 / span 3;
  }

  .ly-col-lg-span-8 {
    grid-column: span 8 / span 8;
  }

  .ly-col-lg-span-5 {
    grid-column: span 5 / span 5;
  }

  .ly-col-lg-span-7 {
    grid-column: span 7 / span 7;
  }

  .ly-col-lg-span-12 {
    grid-column: span 12 / span 12;
  }
}

@media (min-width: 1440px) {
  .ly-container {
    max-width: 1320px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .ly-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
  }

  .ly-col-lg-span-6 {
    grid-column: span 6 / span 6;
  }

  .ly-col-lg-span-4 {
    grid-column: span 4 / span 4;
  }

  .ly-col-lg-span-3 {
    grid-column: span 3 / span 3;
  }

  .ly-col-lg-span-8 {
    grid-column: span 8 / span 8;
  }

  .ly-col-lg-span-5 {
    grid-column: span 5 / span 5;
  }

  .ly-col-lg-span-7 {
    grid-column: span 7 / span 7;
  }

  .ly-col-lg-span-12 {
    grid-column: span 12 / span 12;
  }
}