@charset "UTF-8";
@layer reset, base, layout, components, utilities;
@layer base {
  :root {
    --font-size-title: 12vw;
    --font-size-title-A: calc(var(--font-size-title) * 1.375);
    --font-base: "GowunBatang-Regular", sans-serif;
    --font-bold: "GowunBatang-Bold", sans-serif;
    --border-container: #d0d0d0 1px solid;
    --border-radius-default: 10px;
    --color-accent: rgb(228, 201, 148);
    --color-accent-hover: rgba(116, 72, 0, 0.4);
    --color-font: rgb(0, 0, 0);
    --color-button-hover: rgb(242, 212, 153);
    --color-line: #999;
    --color-image-modal: #1f1f1f;
    --color-table-hover: #cdb47840;
    --shadow-title: rgba(255, 255, 255, 0.7) 0px 0px 20px;
    --padding-default: 1.5rem;
    --padding-table: 5px 15px;
    --transition-default: 0.2s ease-in-out;
  }
}
@layer reset {
  /* 1. Box model */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  /* 2. Margin reset */
  * {
    margin: 0;
  }
  /* 3. HTML / BODY základ */
  html {
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
      -o-tab-size: 4;
         tab-size: 4;
  }
  body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
  }
  /* 4. Media elements */
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }
  /* 5. Form elements */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  /* 6. Remove animations for users that prefer it */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}
@layer base {
  html {
    background-image: url("./../images/backoptimized.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    scroll-behavior: smooth;
  }
  body {
    font-family: var(--font-base);
    font-size: clamp(14px, 1.9vw, 17px);
    color: --color-font;
    margin: 0px;
  }
  .background-cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    filter: opacity(0.5);
    background: linear-gradient(45deg, rgb(10, 74, 89) 0%, rgb(11, 82, 124) 8.333%, rgb(13, 92, 159) 16.667%, rgb(16, 104, 194) 25%, rgb(18, 118, 227) 33.333%, rgb(21, 133, 255) 41.667%, rgb(24, 150, 255) 50%, rgb(28, 169, 255) 58.333%, rgb(31, 188, 255) 66.667%, rgb(35, 209, 255) 75%, rgb(39, 230, 255) 83.333%, rgb(43, 251, 255) 91.667%, rgb(47, 255, 255) 100%);
  }
  * {
    box-sizing: border-box;
  }
  @media (max-width: 768px) {
    html {
      background: #DEB890;
      background: linear-gradient(135deg, rgb(222, 184, 144) 0%, rgba(222, 184, 144, 0.5) 100%);
    }
  }
}
@layer base {
  @font-face {
    font-family: "GowunBatang-Regular";
    src: local("GowunBatang-Regular"), local("GowunBatang-Regular"), url("./../fonts/Gowun_Batang/GowunBatang-Regular.woff2") format("woff2"), url("./../fonts/Gowun_Batang/GowunBatang-Regular.woff") format("woff");
    font-display: swap;
  }
  @font-face {
    font-family: "GowunBatang-Bold";
    src: local("GowunBatang-Bold"), local("GowunBatang-Bold"), url("./../fonts/Gowun_Batang/GowunBatang-Bold.woff2") format("woff2"), url("./../fonts/Gowun_Batang/GowunBatang-Bold.woff") format("woff");
    font-display: swap;
  }
  @font-face {
    font-family: "DancingA";
    src: local("DancingA"), local("DancingA"), url("./../fonts/DancingA.woff") format("woff");
    font-display: swap;
  }
  @font-face {
    font-family: "AmaticSC-Regular";
    src: local("AmaticSC-Regular"), local("AmaticSC-Regular"), url("./../fonts/AmaticSC-Regular.woff2") format("woff2"), url("./../fonts/AmaticSC-Regular.woff") format("woff");
    font-display: swap;
  }
  @font-face {
    font-family: "AmaticSC-Bold";
    src: local("AmaticSC-Bold"), local("AmaticSC-Bold"), url("./../fonts/AmaticSC-Bold.woff2") format("woff2"), url("./../fonts/AmaticSC-Bold.woff") format("woff");
    font-display: swap;
  }
  @font-face {
    font-family: "PlaylistScript";
    src: local("PlaylistScript"), local("PlaylistScript"), url("./../fonts/PlaylistScript.woff2") format("woff2"), url("./../fonts/PlaylistScript.woff") format("woff");
    font-display: swap;
  }
}
@layer base {
  .center-text {
    text-align: center !important;
  }
  .center-text p {
    text-align: center !important;
  }
  h1 {
    font-family: var(--font-bold);
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 1rem 0;
  }
  h2 {
    font-family: var(--font-bold);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
  }
  h3 {
    font-family: var(--font-bold);
    margin: 0 0 0.2rem 0;
    font-size: clamp(1rem, 2vw, 1.1rem);
  }
  h3.detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-line);
    padding: 0.1rem 0;
  }
  h3.detail.last {
    border: none;
  }
  h3 i.fa-solid {
    margin-right: 0.5rem;
    font-size: 1.1em;
    flex-shrink: 0;
  }
  h3 i.fa-solid.icon-breath {
    animation: iconBreath 3s ease-in-out 0s infinite;
    display: inline-block;
  }
  p {
    margin: 0.1rem 0.1rem 0.5rem 0.1rem;
    text-align: justify;
  }
  p.title {
    font-family: "PlaylistScript";
    font-size: var(--font-size-title);
    text-shadow: var(--shadow-title);
    font-weight: 400;
    margin: 5rem 0 -2.5rem 0;
  }
  p.title::first-letter {
    font-family: "DancingA", serif;
    font-size: var(--font-size-title-A);
    margin-right: -0.05em;
    vertical-align: -0.08em;
  }
  a {
    text-decoration: underline;
    color: black;
    transition: var(--transition-default);
  }
  a.price-href {
    margin-left: 0.2rem;
    transition: var(--transition-default);
  }
  a i.fa-phone,
  a i.fa-envelope,
  a i.fa-location-dot {
    transition: var(--transition-default);
  }
  a .social-link {
    font-size: 2rem;
    margin: 0.5rem;
    transition: var(--transition-default);
  }
  /* ANIMATIONS */
  @keyframes iconBreath {
    0% {
      transform: scale(1);
      color: --color-font;
    }
    50% {
      transform: scale(1.15);
      color: rgb(159, 0, 0);
    }
    100% {
      transform: scale(1);
      color: var(--color-font);
    }
  }
  /* HOVER NOT FOR TOUCHSCREEN*/
  @media (hover: hover) {
    a:hover {
      color: var(--color-accent-hover);
    }
    a:hover:hover i.fa-phone {
      color: var(--color-accent-hover);
    }
    a:hover:hover i.fa-envelope {
      color: var(--color-accent-hover);
    }
    a:hover:hover i.fa-location-dot {
      color: red;
    }
    h3.detail:hover {
      cursor: pointer;
      background-color: var(--color-table-hover);
    }
  }
}
@layer layout {
  .footer {
    font-size: 0.85rem;
    margin: 0rem;
    color: rgba(0, 0, 0, 0.4);
  }
  .footer a {
    color: var(--color-accent-hover);
    text-decoration: none;
  }
}
@layer layout {
  .grid {
    margin: 0em;
  }
  @media (min-width: 768px) {
    .grid {
      margin: 0 2em;
    }
  }
  @media (min-width: 1024px) {
    .grid {
      margin: 0 10em;
    }
  }
  .row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    padding: 0 0.5rem 1rem 0.5rem;
  }
  .row.first {
    margin-top: 3rem;
  }
  @media (min-width: 768px) {
    .row {
      padding: 0 1.5rem;
      margin-bottom: 1.5rem;
    }
  }
  @media (min-width: 1024px) {
    .row {
      padding: 0 1.5rem;
      margin-bottom: 1.5rem;
    }
  }
  .container {
    border: none;
    background: rgba(255, 255, 255, 0.7);
  }
  @media (min-width: 768px) {
    .container {
      border: var(--border-container);
      box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
      -webkit-backdrop-filter: blur(15px);
              backdrop-filter: blur(15px);
    }
  }
  @media (min-width: 1024px) {
    .container {
      border: var(--border-container);
      box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
      -webkit-backdrop-filter: blur(15px);
              backdrop-filter: blur(15px);
    }
  }
}
@layer components {
  .cookies {
    padding: 0.5rem;
    border: var(--border-container);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    margin-bottom: 0;
    width: 100%;
    border-top: 1px groove rgba(129, 129, 129, 0.3);
  }
  .cookies p {
    margin-bottom: 0.5rem;
  }
  .cookies a {
    color: var(--color-accent-hover);
    text-decoration: none;
    transition: var(--transition-default);
  }
  .cookies .cookies-button {
    font-size: 1rem;
    font-family: var(--font-base);
    background-color: var(--color-accent);
    border-radius: var(--border-radius-default);
    border-width: 1px;
    border-color: rgba(129, 129, 129, 0.3);
    border-style: groove;
    cursor: pointer;
    padding: 8px 16px;
    transition: var(--transition-default);
    color: black;
  }
  .cookies .cookies-button.in-container {
    width: 100%;
  }
  /* HOVER NOT FOR TOUCHSCREEN*/
  @media (hover: hover) {
    .cookies-button:hover {
      background-color: var(--color-button-hover) !important;
    }
    .cookies a:hover {
      color: var(--color-accent-hover);
    }
  }
}
@layer components {
  .main-button {
    font-size: 1rem;
    font-family: var(--font-base);
    background-color: var(--color-accent);
    border-radius: var(--border-radius-default);
    border-style: none;
    cursor: pointer;
    padding: 0.7rem 1rem;
    transition: var(--transition-default);
    color: black;
  }
  .main-button.in-container {
    border-style: groove;
    border-width: 1px;
    border-color: rgba(129, 129, 129, 0.3);
    width: 100%;
  }
  .main-button.in-container-detail {
    border-style: groove;
    border-width: 1px;
    border-color: rgba(129, 129, 129, 0.3);
    width: 100%;
  }
  .main-button:active:not(.disabled) {
    cursor: pointer;
  }
  .scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 1rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: var(--color-accent);
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(129, 129, 129, 0.3);
    align-content: center;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 10px, rgba(0, 0, 0, 0.2) 0px 10px 20px;
    opacity: 0;
    pointer-events: none;
    scale: 1;
    transition: var(--transition-default);
  }
  .scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
  }
  /* HOVER NOT FOR TOUCHSCREEN*/
  @media (hover: hover) {
    .main-button:hover,
    .in-container:hover,
    .in-container-detail:hover {
      background-color: var(--color-button-hover) !important;
    }
    .scroll-top:hover {
      cursor: pointer;
      scale: 1.1;
    }
  }
}
@layer components {
  address .fa-solid {
    margin: 0 10px;
  }
  address a {
    text-decoration: none;
  }
  .map {
    border-radius: var(--border-radius-default);
    border: 0px;
    width: 100%;
    height: 300px;
  }
  /* HOVER NOT FOR TOUCHSCREEN*/
  @media (hover: hover) {
    .social-link:hover {
      color: var(--color-accent-hover);
    }
  }
}
@layer components {
  .price-list {
    display: flex;
    width: 100%;
    margin-bottom: 0;
    padding: 0.5rem 0;
  }
  .price-list a {
    text-decoration: none;
    background-color: var(--color-accent);
    border-radius: var(--border-radius-default);
    border-style: groove;
    border-width: 1px;
    border-color: rgba(129, 129, 129, 0.3);
    cursor: pointer;
    transition: var(--transition-default);
    color: black;
    padding: 0.3rem 0.6rem;
    margin-left: 1rem;
  }
  .price-list.title {
    font-family: var(--font-bold);
  }
  section[id] {
    scroll-margin-top: 60px;
  }
  .price-left {
    white-space: nowrap;
    margin-left: 1rem;
  }
  .price-right {
    white-space: nowrap;
  }
  .price-dots {
    overflow: hidden;
    color: var(--color-line);
    letter-spacing: 5px;
    margin: 0 5px;
  }
  .price-dots:after {
    content: "..................................................................................................................................";
  }
  .info-box {
    border-radius: var(--border-radius-default);
    border: 1px solid black;
    border-style: dashed;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .info-box p {
    margin: 0;
  }
  .info-box i {
    font-size: 2rem;
    color: var(--color-accent-hover);
    flex-shrink: 0;
  }
  .team-content {
    display: grid;
    grid-template-rows: auto auto;
    gap: 1rem;
    align-items: start;
  }
  .team-content.reverse img {
    order: 1;
  }
  .team-content.reverse p {
    order: 2;
  }
  @media (min-width: 768px) {
    .team-content.reverse {
      grid-template-columns: auto 20%;
      grid-template-rows: 1fr;
    }
    .team-content.reverse img {
      order: 2;
    }
    .team-content.reverse p {
      order: 1;
    }
  }
  @media (min-width: 1024px) {
    .team-content.reverse {
      grid-template-columns: auto 20%;
      grid-template-rows: 1fr;
    }
    .team-content.reverse img {
      order: 2;
    }
    .team-content.reverse p {
      order: 1;
    }
  }
  @media (min-width: 768px) {
    .team-content {
      grid-template-columns: 20% auto;
      grid-template-rows: 1fr;
    }
  }
  @media (min-width: 1024px) {
    .team-content {
      grid-template-columns: 20% auto;
      grid-template-rows: 1fr;
    }
  }
  /* HOVER NOT FOR TOUCHSCREEN*/
  @media (hover: hover) {
    .price-list a:hover {
      background-color: var(--color-button-hover) !important;
    }
  }
}
@layer components {
  img {
    border-color: rgba(129, 129, 129, 0.3);
    transition: var(--transition-default);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  }
  img.thumbnail {
    width: 100%;
    height: 10rem;
    border-radius: var(--border-radius-default);
    opacity: 0.8;
    -o-object-fit: cover;
       object-fit: cover;
    scale: 1;
  }
  img.portrait {
    border-radius: var(--border-radius-default);
    max-height: 100%;
    height: auto;
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  img.portrait.mobile {
    display: none;
    width: 40%;
    float: left;
    margin: 1.5rem;
    shape-outside: circle(55%);
  }
  /* HOVER NOT FOR TOUCHSCREEN*/
  @media (hover: hover) {
    img.clickable:hover {
      cursor: pointer;
      opacity: 1;
      scale: 1.01;
    }
  }
}
@layer components {
  ul {
    margin: 0;
    padding: 0;
    list-style-type: disc;
    list-style-position: inside;
    margin: 1rem;
  }
}
@layer components {
  .menu-inner {
    border-bottom: 1px solid var(--color-line);
    box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    margin: 0em;
  }
  @media (min-width: 768px) {
    .menu-inner {
      margin: 0 2em;
    }
  }
  @media (min-width: 1024px) {
    .menu-inner {
      margin: 0 10em;
    }
  }
  .vertical-menu {
    width: 100%;
    position: fixed;
    top: 0;
    transition: var(--transition-default);
    z-index: 99;
  }
  .vertical-menu a {
    background-color: var(--color-accent);
    color: black;
    display: block;
    padding: 0.7rem 1rem;
    text-decoration: none;
    transition: var(--transition-default);
  }
  .vertical-menu a:not(:first-child) {
    display: none;
  }
  .vertical-menu a.menu-toggle {
    padding: 1rem;
  }
  .vertical-menu i.menu-icon {
    margin-right: 0.5rem;
  }
  .vertical-menu.show a {
    display: block;
  }
  /* HOVER NOT FOR TOUCHSCREEN*/
  @media (hover: hover) {
    .vertical-menu a:hover {
      color: black;
      background-color: var(--color-button-hover);
    }
  }
}
@layer components {
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 101;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
  }
  .modal-content {
    padding: 0.5rem;
    border: var(--border-container);
    border-radius: var(--border-radius-default);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
    max-width: 80vw;
    max-height: 80vh;
    overflow-y: auto;
  }
  .modal-content a {
    text-decoration: underline;
    transition: var(--transition-default);
  }
  .modal-content .modal-button {
    font-size: 1rem;
    font-family: var(--font-base);
    background-color: var(--color-accent);
    border-radius: var(--border-radius-default);
    border-width: 1px;
    border-color: rgba(129, 129, 129, 0.3);
    border-style: groove;
    cursor: pointer;
    padding: 8px 16px;
    transition: var(--transition-default);
    color: black;
  }
  .modal-content .modal-button.in-container {
    width: 100%;
  }
  .modal-content label {
    display: block;
    margin: 1em 0;
    text-align: left;
  }
  /* IMAGE MODAL */
  .image-modal {
    display: none;
    position: fixed;
    z-index: 100;
    padding-top: 5rem;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--color-image-modal);
  }
  .image-modal .image-modal-content {
    position: relative;
    margin: auto;
    padding: 0;
    width: 100%;
    max-width: 90vw;
    max-height: calc(100vh - 6rem);
  }
  .image-modal .close {
    color: white;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 35px;
    font-weight: bold;
    scale: 1;
    transition: var(--transition-default);
  }
  .image-modal .image-modal-slide {
    display: none;
  }
  .image-modal .prev,
  .image-modal .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    color: white;
    font-size: 1.5rem;
    transition: var(--transition-default);
    text-decoration: none;
    -moz-user-select: none;
         user-select: none;
    -webkit-user-select: none;
    scale: 1;
    text-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  }
  .image-modal .next {
    right: 0;
  }
  .image-modal .image-modal-slide img {
    display: block;
    margin: 0 auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 8rem);
    -o-object-fit: contain;
       object-fit: contain;
  }
  /* HOVER NOT FOR TOUCHSCREEN*/
  @media (hover: hover) {
    .modal-button:hover {
      background-color: var(--color-accent) !important;
    }
    .image-modal .close:hover,
    .image-modal .image-modal .close:focus {
      color: var(--color-accent);
      text-decoration: none;
      cursor: pointer;
      scale: 1.1;
    }
    .image-modal .prev:hover,
    .image-modal .next:hover {
      color: var(--color-accent);
      scale: 1.1;
    }
  }
}
@layer components {
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th {
    padding: var(--padding-table);
    text-align: left;
    border-bottom: 1px solid var(--color-line);
  }
  th.table-detail {
    width: 2rem;
  }
  td {
    padding: var(--padding-table);
    text-align: left;
    border-bottom: 1px solid var(--color-line);
    text-align: justify;
  }
  tr.tr-href {
    cursor: pointer;
  }
  /* HOVER NOT FOR TOUCHSCREEN*/
  @media (hover: hover) {
    .tr-detail:hover,
    .tr-header:hover {
      background-color: transparent !important;
    }
    tr:hover {
      background-color: var(--color-table-hover);
    }
  }
}
@layer utilities {
  /* MOBILE (default) */
  .s1 {
    grid-column: span 1;
    min-width: 0;
  }
  .s2 {
    grid-column: span 2;
    min-width: 0;
  }
  .s3 {
    grid-column: span 3;
    min-width: 0;
  }
  .s4 {
    grid-column: span 4;
    min-width: 0;
  }
  .s5 {
    grid-column: span 5;
    min-width: 0;
  }
  .s6 {
    grid-column: span 6;
    min-width: 0;
  }
  .s7 {
    grid-column: span 7;
    min-width: 0;
  }
  .s8 {
    grid-column: span 8;
    min-width: 0;
  }
  .s9 {
    grid-column: span 9;
    min-width: 0;
  }
  .s10 {
    grid-column: span 10;
    min-width: 0;
  }
  .s11 {
    grid-column: span 11;
    min-width: 0;
  }
  .s12 {
    grid-column: span 12;
    min-width: 0;
  }
  /* TABLET */
  @media (min-width: 768px) {
    .m1 {
      grid-column: span 1;
      min-width: 0;
    }
    .m2 {
      grid-column: span 2;
      min-width: 0;
    }
    .m3 {
      grid-column: span 3;
      min-width: 0;
    }
    .m4 {
      grid-column: span 4;
      min-width: 0;
    }
    .m5 {
      grid-column: span 5;
      min-width: 0;
    }
    .m6 {
      grid-column: span 6;
      min-width: 0;
    }
    .m7 {
      grid-column: span 7;
      min-width: 0;
    }
    .m8 {
      grid-column: span 8;
      min-width: 0;
    }
    .m9 {
      grid-column: span 9;
      min-width: 0;
    }
    .m10 {
      grid-column: span 10;
      min-width: 0;
    }
    .m11 {
      grid-column: span 11;
      min-width: 0;
    }
    .m12 {
      grid-column: span 12;
      min-width: 0;
    }
  }
  /* DESKTOP */
  @media (min-width: 1024px) {
    .l1 {
      grid-column: span 1;
      min-width: 0;
    }
    .l2 {
      grid-column: span 2;
      min-width: 0;
    }
    .l3 {
      grid-column: span 3;
      min-width: 0;
    }
    .l4 {
      grid-column: span 4;
      min-width: 0;
    }
    .l5 {
      grid-column: span 5;
      min-width: 0;
    }
    .l6 {
      grid-column: span 6;
      min-width: 0;
    }
    .l7 {
      grid-column: span 7;
      min-width: 0;
    }
    .l8 {
      grid-column: span 8;
      min-width: 0;
    }
    .l9 {
      grid-column: span 9;
      min-width: 0;
    }
    .l10 {
      grid-column: span 10;
      min-width: 0;
    }
    .l11 {
      grid-column: span 11;
      min-width: 0;
    }
    .l12 {
      grid-column: span 12;
      min-width: 0;
    }
  }
}
@layer reset, base, layout, components, utilities;/*# sourceMappingURL=main.css.map */