@use "../mixin";

.MainLayout {
  display: grid;
  grid-template-columns: max-content auto;

  position: relative;

  height: 100%;

  z-index: 1;

  .content-flow {
    display: grid;
    align-content: space-between;
    align-items: start;
    gap: 24px;
    grid-column: 2;
    grid-template-columns: repeat(12, minmax(60px, 72px));
    justify-content: center;

    position: relative;

    padding-block-end: 68px;
    padding-block-start: 12px;

    width: 100%;

    overflow: overlay;
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
    scrollbar-width: thin;

    .home-content {
      display: flex;
      flex-flow: column wrap;
      gap: 42px;
      grid-column: span 12;

      height: 100%;

      padding: 24px;

      hgroup.title {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        justify-content: left;

        width: 100%;

        h1 {
          @include mixin.typescale-style("display-large");

          grid-column: span 9;
        }

        h6 {
          grid-column: span 9;

          text-align: end;
        }

        img {
          grid-column: 11 / span 2;
          grid-row: 2 / span 2;

          height: 120px;
          width: 120px;

          -webkit-mask: var(--via-svg-mask) no-repeat 0 / 100%;
          mask: var(--via-svg-mask) no-repeat 0 / 100%;
        }
      }
    }
  }
}

@media screen and (max-width: 1600px) {
  .MainLayout .content-flow {
    grid-template-columns: repeat(12, minmax(60px, 72px));

    padding-inline: 12px;

    .home-content {
      grid-column: span 12;
    }
  }
}

@media screen and (max-width: 1200px) {
  .MainLayout .content-flow {
    grid-template-columns: repeat(8, 1fr);

    width: 100%;

    .home-content {
      grid-column: span 8;
    }
  }
}

@media screen and (max-width: 840px) {
  .MainLayout {
    grid-template-columns: 0px auto;
    grid-template-rows: auto 64px;

    .content-flow {
      grid-template-columns: repeat(6, 1fr);

      padding-block: 64px;
      padding-inline: 24px;

      .home-content {
        grid-column: span 6;
      }
    }
  }
}

@media screen and (max-width: 600px) {
  .MainLayout .content-flow {
    grid-template-columns: repeat(4, 1fr);

    padding-inline: 12px;

    .home-content {
      grid-column: span 4;
    }
  }
}
