@layer layouts {

  /* .section-main
  ------------------------------------------------ */
  .section-main {
    padding: 220px 48px 272px min(194px, calc(194 / 1920 * 100vw));

    @media (max-width: 1020px) {
      padding: 64px 20px 168px;
    }

    >.container {
      max-width: 1677px;
      margin: 0 auto;
    }

    &[data-section="faq-page"] {
      padding: 97px 48px 256px min(194px, calc(194 / 1920 * 100vw));

      @media (max-width: 1020px) {
        padding: 50px 20px 64px;
      }
    }

    &[data-section="404-page"] {
      padding: 270px 48px 0 min(194px, calc(194 / 1920 * 100vw));

      @media (max-width: 1020px) {
        padding: 35px 20px 0;
      }
    }
  }

  /* .section-panel
  ------------------------------------------------ */
  .section-panel {
    position: relative;
    display: grid;
    grid-template-columns: clamp(200px, calc(334 / 1920 * 100vw), 334px) 1fr;
    gap: min(131px, calc(131 / 1920 * 100vw));

    @media (width < 1400px) {
      gap: min(70px, calc(60 / 1400 * 100vw));
    }

    @media (max-width: 1020px) {
      grid-template-columns: 100%;
      gap: 0;
    }
  }

  /* .section-panel-faq
  ------------------------------------------------ */
  .section-panel-faq {
    position: relative;
    display: grid;
    grid-template-columns: clamp(252px, calc(252 / 1920 * 100vw), 334px) 1fr;
    gap: min(174px, calc(174 / 1920 * 100vw));
    margin-top: 220px;

    @media (width < 1400px) {
      gap: min(70px, calc(60 / 1400 * 100vw));
      margin-top: min(120px, calc(120 / 1400 * 100vw));
    }

    @media (max-width: 1020px) {
      grid-template-columns: 100%;
      gap: 0;
      margin-top: 0;
    }
  }

  /* .section-panel-flow
  ------------------------------------------------ */
  .section-panel-flow {
    position: relative;
    display: grid;
    grid-template-columns: clamp(252px, calc(252 / 1920 * 100vw), 334px) 1fr;
    gap: min(104px, calc(104 / 1920 * 100vw));
    padding-top: 166px;
    padding-bottom: 140px;
    border-bottom: 1px solid var(--color-border-light-gray-2);

    @media (width < 1400px) {
      gap: min(70px, calc(60 / 1400 * 100vw));
      margin-top: min(120px, calc(120 / 1400 * 100vw));
    }

    @media (max-width: 1020px) {
      grid-template-columns: 100%;
      gap: 0;
      padding-top: 0;
      padding-bottom: 64px;
      margin-top: 52px;
    }
  }

  /* .section-faq
  --------------------------------------------- */
  .section-faq {
    &:not(:first-child) {
      padding-top: 168px;

      @media (max-width: 1020px) {
        padding-top: 64px;
      }
    }

    @media (max-width: 1020px) {
      margin-top: 20px;
    }
  }

  /* .section-inquiry
  ------------------------------------------------ */
  .section-inquiry {
    padding: 0 0 200px;

    @media (max-width: 1020px) {
      padding: 0 0 120px;
    }

    >.container {
      max-width: 1196px;
      padding-inline: 48px;
      margin: 0 auto;

      @media (max-width: 1020px) {
        max-width: 100%;
        padding-inline: 0;
      }
    }
  }
}