&:root {
  --color-blue: #111C35;
  --color-red: #BD2F2C;

  --font-degular: 'degular', sans-serif;
  --font-lintel: 'lintel', sans-serif;
  --font-ivy: "ivypresto-display", serif;
}

html,
body {
  scroll-behavior: smooth;
}

.cs-hero {
  align-items: center;
  column-gap: 1.5rem;
  display: grid;
  grid-template-columns: 44.64% 1fr;
  margin-block: 3rem 0;
 
  img {
    display: block;
    width: 100%;
  }

  .c-hero__col:last-child {
    padding: 1.5rem;
    position: relative;
  }

  .cs-hero__back {
    color: var(--color-red);
    font-family: var(--font-degular);
    font-size: 16px;
    font-weight: 700;
    position: absolute;
    right: 2rem;
    text-decoration: none;
    top: 2rem;
  }

  .cs-hero__col:first-child {
    a {
      display: block;
      position: relative;

      & > img { width: 100%; }

      & > div {
        left: 50%;
        position: absolute;
        top: 50%;
        translate: -50% -50%;
        z-index: 10;

        max-width: 182px;
      }
    }
  }

  .cs-hero__content {
    margin-inline: auto;
    width: min(100%, 660px);

    h1 {
      color: var(--color-red);
      font-family: var(--font-degular);
      font-size: 60px;
      font-weight: 500;
      line-height: 1.1;
      margin-block: 0 .5rem;
    }

    h2 {
      font-family: var(--font-degular);
      font-size: 32px;
      font-weight: 500;
      line-height: 1.1;
      margin-block: 0 1.25rem;
    }

    p {
      font-family: var(--font-degular);
      font-size: 22px;
      line-height: 1.25;
      font-weight: 500;
      margin-block: 0 2rem;
      text-wrap: pretty;
    }

    .cs-hero__cta {
      align-items: center;
      background: var(--color-red);
      border: 0;
      color: #fff;
      cursor: pointer;
      display: inline-flex;
      font-family: var(--font-degular);
      font-size: 22px;
      font-weight: 500;
      height: 48px;
      line-height: 1;
      padding: 0 2.5rem;
      text-decoration: none;
    }
  }
}

.cs-quote {
  background: var(--color-blue);
  color: #fff;
  padding: 4rem 1.5rem;
  position: relative;

  .cs-quote__container {
    display: flex;;
    flex-direction: column;
    gap: 1.5rem;
    margin-inline: auto;
    width: min(1256px, 85vw);

    & > * { width: 100%; }
    & > p { text-align: right; }
  }

  .cs-quote__content {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    z-index: 20;
  }

  .cs-quote__icon {
    img { display: inline-block; margin: 0; max-width:36px; translate:0 -4px; }
  }

  .cs-quote__quote {
    font-family: var(--font-ivy);
    font-size: 24px;
    font-style: italic;
    line-height: 1.33;
    margin-block: 0;
    text-wrap: pretty;
  }

  .cs-quote__by {
    font-family: var(--font-degular);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
}

.cs-qa {
  display: grid;
  grid-template-columns: 1fr;
  padding: 8rem 0;

  .cs-qa__content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
    width: min(100%, 1300px);

    h3 {
      color: var(--color-red);
      font-family: var(--font-degular);
      font-size: 36px;
      font-weight: 600;
      line-height: 1.1;
      margin-block: 0 1rem;
    }

    p {
      font-family: var(--font-degular);
      font-size: 22px;
      font-weight: 500;
      line-height: 1.25;
      margin-block: 0;
      text-wrap: pretty;

      strong {
        font-family: var(--font-degular);
        font-size: 1.15em;
        font-style: italic;
        font-weight: 800;
      }
    }
  }
}