html {
  font-family: var(--font-body);
}

body {
  margin: 0;
  background-color: var(--color-bg-primary);
}

/* first section */
.hero__image {
  width: 100%;
  object-fit: cover;
  margin: 2rem 0;
  max-width: 394px;
  grid-area: img;
}

.banner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "top"
    "img"
    "bottom";
  align-items: center;
  text-transform: uppercase;
  line-height: 1.3;
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  justify-items: center;
}

.text-top {
  grid-area: top;
  align-self: end;
}

.text-bottom {
  grid-area: bottom;
  align-self: start;
}
.text-bottom span:first-child {
  display: none;
}

@media (min-width: 1024px) {
  .banner {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "top    img"
      "bottom img";
  }
  .text-top span:last-child {
    display: none;
  }
}

/* end first section */

/* second section */
.bender_container {
  flex-direction: column;
  align-items: center;
}

.overlay_wrapper {
  position: relative;
  display: inline-block;
}

.bender__image {
  display: block;
  position: relative;
  max-width: 610px;
  width: 100%;
}

.overlay_wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  mix-blend-mode: color-burn;
  max-width: 610px;
  width: 100%;

  background: url("/chess/assets/images/overlay.png") center / cover;
  mask: url("/chess/assets/images/bender.png") center / contain no-repeat;
  -webkit-mask: url("/chess/assets/images/bender.png") center / contain
    no-repeat;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.25rem;
  line-height: 1.2;
}

.info-table tr {
  display: block;
  padding: 1rem 0;
}
.info-table tr:not(:last-child) {
  border-bottom: 2px solid #d0d0d0;
}
.info-table tr.small-cell {
  display: flex;
  gap: 0.5rem;
}

.info-table tr td:last-child {
  font-weight: 600;
}

.info-table td {
  display: block;
  s {
    text-decoration-color: var(--color-red);
  }
}

.info-table .label {
  color: var(--color-text-secondary);
  opacity: 0.7;
  padding-left: 0;
  margin-bottom: 0.5rem;
}

@media (min-width: 1024px) {
  .bender_container {
    flex-direction: row;
  }
  .bender__image {
    width: auto;
  }

  .info-table tr,
  .info-table tr.small-cell {
    display: table-row;
  }

  .info-table td {
    display: table-cell;
    padding: 1rem;
    vertical-align: top;
  }
  .info-table tr td:last-child {
    border-left: 2px solid #d0d0d0;
    min-width: 255px;
  }
}

/* end second section */

/* 3rd section */

.last-line {
  display: block;
}

.sub {
  display: block;
  font-size: clamp(1.125rem, 1.8vw, 1.25rem);
  font-family: var(--font-body);
  text-wrap-style: normal;

  line-height: 1.2;
  margin-top: 1rem;
  text-transform: capitalize;
}
@media (min-width: 1024px) {
  .last-line {
    display: inline-flex;
    gap: 20px;
  }
  .last-line {
    align-items: center;
  }
  .sub {
    margin-top: 0;
    max-width: 20rem;
  }
}
/* end 3rd section */

/* hero section */
.btns__container {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  margin-bottom: 325px;

  button:last-child {
    background-color: #ffffff;
    border: none;
    &:hover {
      background-color: var(--color-dark);
      color: var(--text-light);
    }
  }
}

.hero__container {
  padding-top: 4rem;
  background-color: var(--color-bg-seconday);
  min-height: 700px;
  overflow: hidden;
}

.sun {
  max-width: 100vw;
  position: absolute;
  top: 50%;
  z-index: 1;
}
.city {
  filter: drop-shadow(8px 0px 0px white) drop-shadow(-8px 0px 0px white)
    drop-shadow(0px 8px 0px white) drop-shadow(0px -8px 0px white);

  max-width: 200vw;
  position: absolute;
  bottom: 0;
  z-index: 2;
  right: -2rem;
}

.hero__container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  mix-blend-mode: color-burn;
  width: 100%;

  background: url("/chess/assets/images/overlay.png") center / cover;
}
.hero__container_content {
  position: relative;

  padding-left: 1.25rem;
  padding-right: 1.25rem;
  z-index: 999;
}

.hero__container_desc {
  text-align: start;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 1024px) {
  .btns__container {
    display: flex;
    flex-direction: row;
    margin-bottom: auto;

    button:last-child {
      background-color: transparent;
      border: 2px solid var(--color-dark);
      color: var(--text-dark);
    }
  }
  .hero__container_content {
    max-width: 542px;
    padding-left: 0;
    padding-right: 0;
  }
  .hero__container_desc {
    text-align: center;
  }

  .sun {
    max-width: 660px;
    position: absolute;
    top: -6rem;
    left: 50%;
    z-index: 1;
  }
  .city {
    position: absolute;
    bottom: 0;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
  }
}

.hero-heading {
  font-size: clamp(32px, 7vw, 3.825rem);
  font-weight: normal;
  text-align: center;
  line-height: 1.2;
  color: #2a2a2a;
  text-transform: uppercase;
  /* padding: 60px 40px; */
}

/* end hero section */
.header {
  position: absolute;
  background-color: transparent;
  margin: 1.25rem;
  z-index: 999;
  width: stretch;
}
.header__logo {
  height: 32px;
  width: 213px;
}

.marquee__container {
  overflow: hidden;
  background-color: var(--color-red);
  padding: 0.565rem 0px;
}
@media (min-width: 1024px) {
  .marquee__container {
    padding: 1.125rem 0px;
  }
}

.marquee {
  display: inline-block;
  white-space: nowrap;
  animation: scroll 30s linear infinite;
}
.marquee span {
  color: white;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2.5vw, 1.375rem);
  text-transform: uppercase;
  line-height: 1.1;
  font-weight: 400;
}
.marquee span::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  margin: 0 0.75rem;
  vertical-align: middle;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.footer {
  background: var(--color-bg-seconday);
}

.footer__container {
  margin: 0 auto;
  text-align: center;
  max-width: var(--block-max-width);
  padding: 1.6rem 1.25rem 2.6rem;
}
@media (min-width: 1024px) {
  .footer__container {
    padding: 2rem 1.25rem 3rem;
  }
}

.footer__text {
  text-align: start;
  color: var(--color-text-secondary);
  font-size: 1rem;
  line-height: 1.2;
  opacity: 0.6;
}

.note {
  color: var(--color-blue);
  font-size: 1.125rem;
}

@media (min-width: 1024px) {
  .note {
    font-size: 1.25rem;
  }
}

.chess {
  position: absolute;
}

.first {
  z-index: 1;
  width: 75px;
  bottom: 10%;
  left: 10%;
}

.second {
  z-index: 1;
  width: 75px;
  bottom: 20%;
  right: 15%;
}

.third {
  bottom: 0;
  z-index: 2;
  left: 50%;
  transform: translate(-50%);
  height: 121px;
}

.forth {
  display: none;
}
@media (min-width: 1024px) {
  .first {
    width: 113px;
    z-index: 1;
    bottom: 25%;
    left: 50%;
  }

  .second {
    width: 113px;
    z-index: 1;
    bottom: 42%;
    left: 77%;
  }

  .forth {
    z-index: 999;
    display: block;
    bottom: 0;
    left: 80%;
  }
  .third {
    left: 60%;
    height: 243px;
  }
}

@media (min-width: 1366px) {
  .second {
    bottom: 42%;
    left: 70%;
  }
}