ihk24/gfi-ihk-2024/stories/components/magazine-cover/magazine-cover.scss

@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

.magazine-cover {
  @media(min-width: 768px) {
    margin: 40px 0 0;
  }
  @media(max-width: 767px) {
    margin: -6px 0 0;

    .image-box {
      margin: 0 calc(var(--container-padding) * -1);
    }

    .reading-time {
      display: none;
    }
  }

  .row {
    justify-content: center;
  }

  .reading-time {
    position: relative;
    float: right;
    right: 0;
    margin: 0 2px 10px;
  }

  &:after {
    content: "";
    display: block;
    clear: both;
  }

  .col {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: -35px;

    @media(min-width: 768px) {
      margin-bottom: -45px;
    }

    @media(min-width: 1200px) {
      margin-bottom: -50px;
    }

    @media(min-width: 1400px) {
      max-width: 83.33334%;
    }
  }

  img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 1110/440;
    object-fit: cover;
    opacity: 1;
    transition: 0.4s ease;

    &.loading {
      opacity: 0;
    }

    @media(max-width: 567px) {
      aspect-ratio: 3/2;
    }
  }
}