/**
 * Responsive overrides – mobile-first
 */

@import "variables.css";

/* Breakpoints:  sm 36rem, md 48rem, lg 64rem, xl 80rem */

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
}

img, svg, video, iframe {
  max-width: 100%;
  height: auto;
}

@media (min-width: 36rem) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  .pain-point {
    padding: var(--space-5) var(--space-6);
  }
}

@media (min-width: 48rem) {
  .section {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }

  .section--lg {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
  }

  .hero {
    padding: var(--space-24) 0;
  }
}

@media (min-width: 36rem) {
  .tudastar-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-card--featured {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .blog-card--featured .blog-card__img-wrap {
    flex: 0 0 45%;
    aspect-ratio: auto;
  }

  .blog-card--featured .blog-card__body {
    justify-content: center;
  }
}

@media (min-width: 64rem) {
  .hero {
    padding: var(--space-32) 0;
  }

  .tudastar-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}