html {
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

main {
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  position: relative;
}

/* Grid layout: container1 / container2 */
.container1,
.container2 {
  grid-template-areas:
    'a b'
    'c b';
}

.title1 {
  grid-area: a;
  align-self: end;
}

.subtext1 {
  grid-area: c;
  align-self: start;
}

.thumb1 {
  grid-area: b;
}

.title2 {
  grid-area: a;
  align-self: end;
}

.subtext2 {
  grid-area: c;
  align-self: start;
}

.thumb2 {
  grid-area: b;
}

@media (max-width: 1023px) {
  .container1,
  .container2 {
    grid-template-columns: 1fr;
    grid-template-areas:
      'a'
      'b'
      'c';
  }
}

@media (min-width: 1024px) {
  .container2 {
    grid-template-areas:
      'a b'
      'a c';
  }

  .title2 {
    grid-area: b;
    align-self: end;
  }

  .subtext2 {
    grid-area: c;
    align-self: start;
  }

  .thumb2 {
    grid-area: a;
    justify-content: start;
  }
}

/* bottomsection marquee */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 40s linear infinite;
}

@media (max-width: 1023px) {
  .animate-marquee {
    animation: marquee 30s linear infinite;
  }
}