ihk24/gfi-ihk-2024/stories/sections/tile-grid/tile-grid.scss

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

.tile-grid {
  margin: var(--section-margin) auto;

  h2 {
    margin-bottom: 0.2em;
  }

  @media(max-width: 567px) {
    max-width: 340px;
  }

  @media(min-width: 768px) and (max-width: 999px) {
    max-width: 88%;
    padding: 0 15px;
  }
  .row {
    margin: 0 -5px;
  }

  .col {
    flex: 1 1 100%;
    max-width: 25%;
    padding: 5px;
    margin-bottom: 200px;

    @media(max-width: 1000px) {
      max-width: 50%;
    }

    @media(max-width: 567px) {
      max-width: 100%;
      margin-bottom: 100px;
    }

    &:nth-child(odd) {
      .tile .tile-outer {
        background-color: var(--theme-color-secondary-dimmed);
        color: var(--theme-color-secondary-intensed);
      }

      .tile-head-outer {
        background-color: var(--theme-color-secondary-intensed);
      }
    }
  }

  .tile-head {
    position: sticky;
    display: block;
    top: 100px;
    padding: 20px 0 10px;
    z-index: 1;
    background-color: #fff;

    @media(max-width: 767px) {
      top: 75px;
    }

    .like-h4 {
      min-height: 3.6em;
      margin: 5px 0;
      max-width: 10em;
    }
  }

  .tile-head-outer {
    position: relative;
    display: block;
    color: white;
    background-color: var(--theme-color-primary);
    transition: 0.2s ease;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    padding: 5% 16% 5% 7%;
    text-decoration-color: rgba(white, 0);
    @include focus-visible;
  }

  .tile {
    padding: 0 0 10px;

    &:last-child {
      margin-bottom: -200px;

      @media(max-width: 567px) {
        margin-bottom: -100px;
      }
    }

    .tile-outer {
      position: relative;
      display: block;
      background-color: var(--theme-color-primary-dimmed-04);
      transition: 0.2s ease;
      @include focus-visible;


      &.focus-visible, &:focus {
        z-index: 1;
      }

      &::before {
        content: '';
        display: block;
        padding-top: 60%;
        background-color: #fff;
        opacity: 0;
        transition: 0.2s ease;

        @media(max-width: 767px) {
          padding-top: 55%;
        }
      }

      &:hover::before {
        opacity: 0.6;
      }
    }

    span {
      display: block;
    }

    .number {
      font-size: var(--font-size-h1);
      line-height: 1;
      font-weight: 700;
      font-family: 'Korb', sans-serif;
      margin-left: -0.04em;

      @media(max-width: 1200px) {
        font-size: 56px;
      }
      @media(max-width: 999px) {
        font-size: 62px;
      }

      small {
        font-size: 0.6em;
        margin-left: 0.2em;
      }
    }

    .icon {
      @include full-size;
      text-align: right;

      img {
        width: auto;
        height: 100%;
        float: right;
      }
      &.dynamic-icon {
        width: 100%;
        height: 100%;
        overflow: hidden;
        &:before {
          display: block;
          height: 100%;
          width: 100%;
          position: absolute;
          right: -8px;
          top: 0;
          font-family: "Pictograms", sans-serif;
          color: var(--theme-color-white);
          font-size: calc(var(--icon-height, 1em) + 14px);
          line-height: 1;
        }
      }
    }

    p {
      @include full-size;
      margin: 0;
      padding: 6% 16% 6.5% 7%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      line-height: 1.2;

      @media(max-width: 1200px) and (min-width: 1000px) {
        font-size: 17px;
        margin-bottom: 1%;
      }
    }
  }

  .tile-head-outer, .tile a {
    &::after {
      @include icon-small-arrow-right-simple;
      font-family: 'Icons', sans-serif;
      position: absolute;
      bottom: 0;
      right: 0;
      margin: 7% 5%;
      font-size: var(--icon-size);
      line-height: 1;
      transition: 0.2s ease;

      @media(max-width: 1200px) and (min-width: 1000px) {
        font-size: 24px;
      }
    }

    &:hover::after {
      transform: translateX(20%);
    }
  }

  // So dass die bilder ins target kopiert werden
  /*
  .fake-class-for-images{
    background-image: url('../../../img/kacheln/tile-01.svg');
    background-image: url('../../../img/kacheln/tile-02.svg');
    background-image: url('../../../img/kacheln/tile-03.svg');
    background-image: url('../../../img/kacheln/tile-04.svg');
    background-image: url('../../../img/kacheln/tile-05.svg');
    background-image: url('../../../img/kacheln/tile-06.svg');
    background-image: url('../../../img/kacheln/tile-07.svg');
    background-image: url('../../../img/kacheln/tile-08.svg');
    background-image: url('../../../img/kacheln/tile-09.svg');
    background-image: url('../../../img/kacheln/tile-10.svg');
    background-image: url('../../../img/kacheln/tile-11.svg');
    background-image: url('../../../img/kacheln/tile-12.svg');
    background-image: url('../../../img/kacheln/tile-13.svg');
    background-image: url('../../../img/kacheln/tile-14.svg');
    background-image: url('../../../img/kacheln/tile-15.svg');
    background-image: url('../../../img/kacheln/tile-16.svg');
  }
  */
}