@charset "utf-8";

:root {}

.top_section_title {
  --clamp-max: 33;
  --clamp-min: 25;
  font-size: var(--clamp);
  font-family: var(--font-family-marugothic);
  font-weight: 600;
  margin-bottom: 1em;
  inline-size: fit-content;
  margin-inline: auto;
  text-align: left;

  span {
    display: block;
    font-size: .5em;
    font-weight: 500;
    color: rgb(var(--mainColor));
  }

  i {
    color: rgb(var(--mainColor));
    display: block;
  }
}

#breadcrumb {
  display: none;
}

#preamble {
  width: auto;
}


.top_box {
  padding: 5em 0;

  >* {
    width: var(--container-width);
    margin: 0 auto;
  }

}

.other_page_links {
  /*ほかのページへのリンク*/
  margin: 2rem auto 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: .3em 1em;

  a {
    color: rgb(var(--baceFontColor));
    font-weight: 400;

    &::after {
      display: inline-block;
      content: "";
      background-color: rgb(var(--baceFontColor));

      -webkit-mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M0 256a256 256 0 1 0 512 0 256 256 0 1 0 -512 0zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z"/></svg>');
      -webkit-mask-size: contain;
      mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M0 256a256 256 0 1 0 512 0 256 256 0 1 0 -512 0zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z"/></svg>');
      mask-size: contain;
      mask-repeat: no-repeat;

      height: 1em;
      width: 1em;
      vertical-align: -1px;
      margin: 0 0 0 .3em;
    }

    &:hover {
      color: rgb(var(--mainColor));

      &::after {
        background: rgb(var(--mainColor));
      }
    }
  }
}

/*大村市で、就職を目指すあなたを応援します。*/
#mezasu {
  background: #FFFDFB;

  section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
    gap: 3rem;
    align-items: center;

    >div {
      hgroup {
        display: flex;
        flex-direction: column-reverse;

        p {
          text-align: left;
          position: relative;

          span {
            display: inline-block;
            padding: .3em .7em;
            border-radius: .5em;
            font-size: .85em;
            font-weight: 500;
            color: #7C2D21;
            background: #ffe4ce;

            &::before {
              content: url(../../img/top/catch_image.png);
              position: absolute;
              right: 0;
              top: 30px;
            }
          }
        }

        h2 {
          margin: 1rem auto 0 auto;
          text-align: left;
          display: block;
          width: 100%;
          font-size: 3.5rem;
          line-height: 3.7rem;
          font-weight: 600;
          font-family: var(--font-family-marugothic);
          letter-spacing: 0;

          span {
            display: block;
            color: rgb(var(--mainColor));
            font-style: italic;
          }
        }
      }

      >P {
        margin: 1rem auto 0 auto;
        font-size: 1.1em;
        text-align: left;
        font-weight: 400;
      }

      >aside {
        display: flex;
        justify-content: start;
        gap: 1rem;
        flex-wrap: wrap;
        margin: 1rem auto 0 auto;

        a {
          display: block;
          background: rgb(var(--mainColor));
          color: white;
          font-weight: 600;
          font-family: var(--font-family-marugothic);
          font-size: 1.2em;
          padding: .7em 1em;
          border-radius: .5em;

          &:hover {
            background: #d94b0f;
            color: yellow;
          }
        }

        >div {
          background: white;
          padding: .3em .7em .3em 3.5em;
          position: relative;
          border-radius: .5em;
          border: 1px solid rgb(var(--mainColor));

          svg {
            height: 2rem;
            fill: rgb(var(--mainColor));
            position: absolute;
            left: .7em;
            top: 50%;
            margin-top: -1rem;
          }

          p {
            font-weight: 500;

            span {
              display: block;
              font-size: .8em;
              font-weight: 400;
              color: gray;
            }
          }
        }
      }

      >ul {
        display: flex;
        justify-content: start;
        gap: .3em 1em;
        flex-wrap: wrap;
        margin: 1em auto 0 auto;

        li {
          &::before {
            display: inline-block;
            content: "";
            background-color: #27C560;

            -webkit-mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zM374 145.7c-10.7-7.8-25.7-5.4-33.5 5.3L221.1 315.2 169 263.1c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c5 5 11.8 7.5 18.8 7s13.4-4.1 17.5-9.8L379.3 179.2c7.8-10.7 5.4-25.7-5.3-33.5z"/></svg>');
            -webkit-mask-size: contain;
            mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zM374 145.7c-10.7-7.8-25.7-5.4-33.5 5.3L221.1 315.2 169 263.1c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c5 5 11.8 7.5 18.8 7s13.4-4.1 17.5-9.8L379.3 179.2c7.8-10.7 5.4-25.7-5.3-33.5z"/></svg>');
            mask-size: contain;
            mask-repeat: no-repeat;

            height: 1em;
            width: 1em;

            font-variant: -1px;
            margin: 0 .3em 0 0;
          }
        }
      }
    }

    figure {
      display: block;
      border: 4px solid white;
      border-radius: 1rem;
      aspect-ratio: 5 / 3;
      background: #eee;
      overflow: hidden;
      position: relative;

      img {
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  @media (max-width: 1200px) {
    section {
      >div {
        hgroup {
          p {
            span {
              &::before {
                top: -30px;
              }
            }
          }
        }
      }
    }
  }

  @media (max-width: 880px) {
    section {
      >div {
        hgroup {
          p {
            span {
              &::before {
                top: 30px;
              }
            }
          }
        }
      }
    }
  }

  @media (max-width: 600px) {
    section {
      >div {
        hgroup {
          p {
            span {
              &::before {
                top: -30px;
              }
            }
          }
        }
      }
    }
  }

  @media (max-width: 375px) {
    section {
      >div {
        hgroup {
          p {
            span {
              &::before {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}

/*こんな方におすすめです*/
#osusume {
  >* {
    background: #FFF7ED;
    padding: 3rem;
    border-radius: 1rem;
  }

  section {
    >div {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
      gap: 1rem;

      figure {
        background: white;
        border-radius: .5em;
        padding: 2rem;

        svg {
          height: 2rem;
          fill: rgb(var(--mainColor));
        }

        figcaption {
          margin: .7em auto 0 auto;
          font-weight: 500;
        }
      }
    }
  }
}

/*大村市で少人数制の職業訓練*/
#oomura {
  section {
    >div {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
      gap: 1rem;

      figure {
        background: white;
        padding: 2rem;
        border-radius: .5rem;
        transition: all .5s ease-out;
        cursor: default;

        span {
          padding: 1em;
          aspect-ratio: 1 / 1;
          text-align: center;
          border-radius: .5em;
          display: inline-block;
          background: #FFF7ED;

          svg {
            width: 2rem;
            height: 2rem;
            fill: rgb(var(--mainColor));
          }
        }

        figcaption {
          h3 {
            margin: 1rem auto 0 auto;
            font-size: 1.1em;
            font-weight: 500;
          }

          p {
            margin: 1rem auto 0 auto;
            text-align: left;
            font-size: .9em;
          }
        }

        &:hover {
          box-shadow: 0 0 10px 3px #FFF7ED;
        }
      }
    }

    aside {
      width: min(960px, 100%);
      margin: 5rem auto 0 auto;
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 3rem;

      figure {
        >span {
          display: block;
          background: #eee;
          box-shadow: 0 0 5px 3px #eee;
          border-radius: .5rem;
          overflow: hidden;
        }

        figcaption {
          margin: 1rem auto 0 auto;
          padding: 1rem 0 0 1.7rem;
          text-align: left;
          font-weight: 500;
          position: relative;

          span {
            font-weight: 300;
            display: block;
            font-size: .8em;
            color: gray;

          }

          &::before {
            display: inline-block;
            content: "";
            background-color: rgb(var(--mainColor));

            -webkit-mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M368.5 18.3l-50.1 50.1 125.3 125.3 50.1-50.1c21.9-21.9 21.9-57.3 0-79.2L447.7 18.3c-21.9-21.9-57.3-21.9-79.2 0zM279.3 97.2l-.5 .1-144.1 43.2c-19.9 6-35.7 21.2-42.3 41L3.8 445.8c-2.9 8.7-1.9 18.2 2.5 26L161.7 316.4c-1.1-4-1.6-8.1-1.6-12.4 0-26.5 21.5-48 48-48s48 21.5 48 48-21.5 48-48 48c-4.3 0-8.5-.6-12.4-1.6L40.3 505.7c7.8 4.4 17.2 5.4 26 2.5l264.3-88.6c19.7-6.6 35-22.4 41-42.3l43.2-144.1 .1-.5-135.5-135.5z"/></svg>');
            -webkit-mask-size: contain;
            mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M368.5 18.3l-50.1 50.1 125.3 125.3 50.1-50.1c21.9-21.9 21.9-57.3 0-79.2L447.7 18.3c-21.9-21.9-57.3-21.9-79.2 0zM279.3 97.2l-.5 .1-144.1 43.2c-19.9 6-35.7 21.2-42.3 41L3.8 445.8c-2.9 8.7-1.9 18.2 2.5 26L161.7 316.4c-1.1-4-1.6-8.1-1.6-12.4 0-26.5 21.5-48 48-48s48 21.5 48 48-21.5 48-48 48c-4.3 0-8.5-.6-12.4-1.6L40.3 505.7c7.8 4.4 17.2 5.4 26 2.5l264.3-88.6c19.7-6.6 35-22.4 41-42.3l43.2-144.1 .1-.5-135.5-135.5z"/></svg>');
            mask-size: contain;
            mask-repeat: no-repeat;

            height: 1em;
            width: 1em;

            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -.5em;
          }
        }
      }

      >div {
        h3 {
          font-weight: 600;
          font-family: var(--font-family-marugothic);
          font-size: 1.3em;
          color: #7C2D21;
        }

        p {
          margin: 1em 0 0 0;
          text-align: left;
          font-size: 1.1em;
          font-weight: 400;
        }
      }

      @media (max-width: 768px) {
        display: block;

        figure {
          width: min(400px, 100%);
          margin: 0 auto;
        }

        >div {
          margin: 2rem auto 0 auto;
        }
      }
    }
  }
}

/*就職に直結する。選べる2つの専門講座*/
#course {
  >article {
    hgroup {
      h2.top_section_title {
        margin-bottom: 0;
      }

      p {
        inline-size: fit-content;
        margin-inline: auto;
        text-align: left;
        margin: .5em auto 0 auto;
        font-weight: 500;
        color: #555;
      }
    }

    >div {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
      gap: 2rem;
      margin: 3rem auto 0 auto;
      --courseColor: #0EA5E9;
      --courseColor2: #F0F9FF;

      section {
        border: 2px solid var(--courseColor2);
        border-radius: 1rem;
        padding: 3rem;
        background: linear-gradient(135deg, #FFFFFF, var(--courseColor2));
        overflow: hidden;
        position: relative;
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 6;
        gap: 1.5rem;

        figure {
          text-align: left;

          span {
            padding: 1em;
            aspect-ratio: 1 / 1;
            text-align: center;
            border-radius: .5em;
            display: inline-block;
            background: var(--courseColor);
            box-shadow: 0 0 5px 3px var(--courseColor2);

            svg {
              width: 2rem;
              height: 2rem;
              fill: white;
            }
          }
        }

        h3 {
          font-family: var(--font-family-marugothic);
          font-size: 1.5em;
          text-align: left;
          font-weight: 600;

          span {
            font-weight: 400;
            font-size: .8em;
            color: var(--courseColor);
          }
        }

        p.way_to {
          background: var(--courseColor);
          color: white;
          position: absolute;
          top: -1.2em;
          right: -1em;
          padding: 2em 2em .5em .7em;
          font-weight: 500;
          font-family: var(--font-family-marugothic);
          border-radius: 0 0 0 1em;
        }

        p.summary {
          margin: 0 auto;
          text-align: left;
          font-weight: 400;
          font-size: 1.1em;
        }

        ul {
          >*+* {
            margin-top: 1em;
          }

          li {
            font-weight: 500;
            padding: 0 0 0 2em;
            text-align: left;

            span {
              display: block;
              font-weight: 400;
              font-size: .9em;
              color: #666;
            }
          }
        }

        aside {
          margin: 0 auto;
          background: var(--courseColor2);
          padding: .5em .7em;
          border-radius: .5em;
          font-weight: 500;
          border: 1px dotted var(--courseColor);
        }

        &:nth-of-type(1) {
          --courseColor: #F97316;
          --courseColor2: #FFEDD5;
        }
      }
    }

    >aside {
      margin: 3rem auto 0 auto;
      display: flex;
      justify-content: center;
      gap: .3em 1em;

      a {
        display: inline-block;
        border: 1px solid silver;

        &:hover {
          opacity: .75;
        }
      }
    }
  }
}

#skill_up {
  /*スキルを習得したその先へ。*/
  background: #FFF7ED;

  section {
    >p {
      width: min(680px, 100%);
      margin: 0 auto;
      text-align: left;
      font-weight: 400;
      font-size: 1.1em;
    }

    div {
      margin: 3rem auto 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
      gap: 1rem;

      figure {
        background: white;
        padding: 2rem;
        border-radius: 1rem;
        border: 2px solid #f7dfc4;
        transition: all .5s ease-out;
        text-align: left;

        &:hover {
          border: 2px solid rgb(var(--mainColor));
        }

        span {
          padding: 1em;
          aspect-ratio: 1 / 1;
          text-align: center;
          border-radius: .5em;
          display: inline-block;
          background: rgb(var(--mainColor));
          box-shadow: 0 0 5px 3px #eee;

          svg {
            width: 2rem;
            height: 2rem;
            fill: white;
          }
        }

        figcaption {
          h3 {
            margin: 2rem auto 0 auto;
            font-weight: 500;
            font-size: 1.2em;
          }

          p {
            font-size: .9em;
            margin: .7em auto 0 auto;
          }
        }
      }

      >p {
        align-self: center;
        text-align: center;
      }

      @media (max-width: 768px) {
        grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
      }
    }

    >aside {
      margin: 3rem auto 0 auto;
      font-size: 1.3em;
      font-weight: 500;
      inline-size: fit-content;
      margin-inline: auto;
      text-align: left;
    }
  }
}

#access {
  /*アクセス・設備*/
  background: #FFFDFB;

  >* {
    background: white;
    padding: 3rem;
    border-radius: 1rem;

    dl {
      display: flex;
      flex-wrap: wrap;
      justify-content: start;
      gap: 2rem;

      dt {
        font-weight: 500;
        font-size: 1.1em;
        text-align: left;

        svg {
          height: 1em;
          fill: rgb(var(--mainColor));
          margin: 0 .3em 0 0;
        }
      }

      dd {
        text-align: left;
        margin: .5em auto 0 auto;
        font-size: .9em;
      }
    }

    >div {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr));
      gap: 2rem 3rem;
      margin: 3rem auto 0 auto;

      >* {
        aspect-ratio: 4 / 3;
        background: #eee;
        border-radius: .7rem;
        position: relative;
        overflow: hidden;
        text-align: center;

        img {
          min-width: 100%;
          min-height: 100%;
          object-fit: cover;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      iframe {
        width: 100%;
        min-height: 400px;
      }
    }
  }
}

/*受講スタートまでの流れ*/
#flow {

  background: #eee;

  section {
    >p {
      font-size: 1.2em;
      font-weight: 500;
      font-style: italic;
      color: #666;

      inline-size: fit-content;
      margin-inline: auto;
      text-align: left;
    }

    >ol {

      display: flex;
      flex-wrap: wrap;
      gap: 2rem 0;
      list-style: none;
      padding: 0;
      margin: 3rem auto 0 auto;

      li {
        background: white;
        padding: 2rem;
        border-radius: .7em;
        flex: 0 1 180px;
        max-width: 100%;
        margin-left: 4rem;
        position: relative;

        h3 {
          font-size: 1.3em;
          color: rgb(var(--mainColor));
          font-weight: 600;
        }

        p {
          font-size: .9em;
          text-align: left;
          margin: .5em auto 0 auto;
        }

        &:first-of-type {
          margin-left: 0;
        }

        &:not(:first-child)::before {
          display: inline-block;
          content: "";
          background-color: rgb(var(--mainColor));

          -webkit-mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M247.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L179.2 256 41.9 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>');
          -webkit-mask-size: contain;
          mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M247.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L179.2 256 41.9 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>');
          mask-size: contain;
          mask-repeat: no-repeat;
          position: absolute;
          height: 1em;
          width: 1em;
          left: -2.5em;
          top: 50%;
          margin-top: -.5em;
        }

        &:last-of-type {
          background: rgb(var(--mainColor));
          color: white;

          h3 {
            color: white;
          }
        }
      }
    }
  }

  @media (max-width: 768px) {
    section {
      >ol {
        li {
          padding: 1rem;
          flex: 0 1 160px;
          margin-left: 2rem;

          &:not(:first-child)::before {
            display: inline-block;
            position: absolute;
            left: -1.5em;
          }
        }
      }
    }
  }
  @media (max-width: 450px) {
    section{
      > ol{
        display:grid;
        grid-template-columns: 1fr;
        gap:1rem;
        li{
          margin-left: 0;
          &:not(:first-child)::before {
            display:none;
          }
        }
      }
    }
  }
}

/*よくある質問*/
#faq {


  section {
    .faq-wrap {
      border: 1px solid #ccc;
      border-radius: 1rem;
      overflow: hidden;
      background: #fff;
      width: min(860px, 100%);
      margin: 3rem auto 0 auto;

      .faq-item {
        border-bottom: 1px solid #eee;

        /* チェックボックスは隠す */
        input[type="checkbox"] {
          display: none;
        }

        /* 質問部分（ラベル） */
        label {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1.2rem;
          background: #fff8ee;
          cursor: pointer;
          font-weight: bold;
          user-select: none;
          transition: background 0.3s;

          /* 右側の＋アイコン */
          span {
            position: relative;
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ffe4ce;
            border-radius: 50%;
            font-size: 0.7rem;
            transition: transform 0.4s ease;

            &::before {
              color: rgb(var(--mainColor));
              content: "＋";
            }
          }
        }

        /* 回答部分のラッパー（ここがヌルッと広がる） */
        .content-wrapper {
          display: grid;
          grid-template-rows: 0fr;
          transition: grid-template-rows 0.4s ease-in-out, opacity 0.3s;
          opacity: 0;
          overflow: hidden;
          visibility: hidden;
          padding: 0 1.5rem;
          transition: all 0.4s ease-in-out;

          .content-inner {
            min-height: 0;
            text-align: left;
            line-height: 1.8;
            color: #444;
          }
        }

        /* 最後の項目の下線を消す */
        &:last-of-type {
          border-bottom: none;
        }

        input:checked {
          ~label {
            span {
              transform: rotate(180deg);

              &::before {
                content: "－";
              }
            }

            ~.content-wrapper {
              grid-template-rows: 1fr;
              opacity: 1;
              visibility: visible;
              padding: 1.5rem;
            }
          }
        }
      }
    }

  }
}

#kengaku {

  /*施設見学も可能です*/
  >section {
    background: rgb(var(--mainColor));
    padding: 3rem;
    border-radius: 1rem;

    h2 {
      color: white;
    }

    >p {
      width: min(670px, 100%);
      margin: 0 auto;
      color: white;
      font-size: 1.1em;
      font-weight: 400;
      text-align: left;
    }

    >div {
      width: min(800px, 100%);
      margin: 2rem auto 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
      gap: 2rem;

      >div {
        border-radius: .5em;
        padding: 2rem;

        p {
          font-weight: 500;
        }

        svg {
          height: 1.2rem;
        }

        &:nth-of-type(1) {
          background: white;

          span {
            font-size: 1.8rem;

            a {
              font-weight: 600;
            }
          }
        }

        &:nth-of-type(2) {
          background: #9A3412;
          color: white;

          a {
            display: inline-block;
            margin: 1rem auto 0 auto;
            background: white;
            color: #9A3412;
            padding: .5em;
            border-radius: .5em;

            span {
              font-weight: 500;
            }

            &:hover {
              background: #f7dfc4;
            }
          }
        }
      }
    }
  }
}