@charset "UTF-8";

/**
 * @copyright     2023 beikeshop.com - All Rights Reserved.
 * @link          https://beikeshop.com
 * @Author        guangda <service@guangda.work>
 * @Date          2023-12-04 13:52:45
 * @LastEditTime  2023-12-04 13:52:53
 */

.module-image-400 {
  .image-402-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 14px;
  }

  .image-402-sub-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 0.9rem;

    @media (max-width: 768px) {
      margin-bottom: 10px;
    }
  }

  .module-image-info {
    margin: 0 -10px;

    @media (max-width: 768px) {
      margin: 0 -5px;
    }

    > div {
      padding: 0 10px;

      @media (max-width: 768px) {
        padding: 0 5px;
      }
    }

    .image-402-1 {
      grid-area: 1/1/3/2;

      @media (max-width: 768px) {
        margin-bottom: 10px;
      }
    }

    .image-402-2 {
      grid-area: 1/2/2/3;

      @media (max-width: 768px) {
        grid-area: 3/1/4/2;
      }
    }

    .image-402-3 {
      grid-area: 2/2/3/3;

      @media (min-width: 768px) {
        margin-top: 20px;
      }

      @media (max-width: 768px) {
        grid-area: 1/2/2/3;
        margin-bottom: 10px;
      }
    }

    .image-402-4 {
      grid-area: 1/3/3/4;

      @media (max-width: 768px) {
        grid-area: 2/2/4/3;
      }
    }
  }


  .image-wrap {
    border-radius: 10px;
    overflow: hidden;
    position: relative;

    .img-name {
      position: absolute;
      bottom: 28px;
      left: 0;
      display: flex;
      justify-content: center;
      width: 100%;

      @media (max-width: 768px) {
        bottom: 18px;
      }

      span {
        color: #111;
        font-weight: bold;
        padding: 6px 10px;
        background-color: #fff;
        border-radius: 40px;
        font-size: 1rem;
        box-shadow: 0 5px 30px rgba($color: #000, $alpha: 0.1);

        @media (max-width: 768px) {
          font-size: .7rem;
        }
      }
    }
  }
}