@import url("../../common/css/base.css?ver=1.1") layer(common);
@import url("../../business/css/base.css?ver=1.1") layer(base);
@import url("/components/contact-info.css") layer(contact-info);

@layer custom {
  #medium_v {
    img {
      @media (max-width: 768px) {
        object-fit: cover;
        object-position: left;
        aspect-ratio: 768 / 358;
      }
    }
  }

  .gray_sec {
    background-color: #f7f7f7;
  }

  #sec_strategy {
    margin-top: 5rem;
    padding-bottom: 5rem;
  }

  dt {
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-top: 2rem;

    @media screen and (min-width: 769px) {
      line-height: 1.5em;
      font-size: 2rem;
    }
    @media screen and (max-width: 768px) {
      line-height: 1.5em;
      font-size: 3.6rem;
    }
  }

  dd {
    @media (min-width: 769px) {
      padding-left: 1.5em;
    }
  }

  .image_boxs {
    margin-top: 3em;
    display: grid;
    gap: 2rem;

    @media (width > 768px) {
      grid-template-columns: repeat(3, 1fr);
      column-gap: 2rem;
    }

    .image_box {
      border-radius: initial;

      & img {
        width: 100%;
        height: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
      }
    }
  }
}