@import '../../extends';
@import '../../functions';
@import '../../mixins';
@import '../../variables';

@import '../atoms/_headline';
@import '../atoms/_text';
@import '../atoms/_icon';

.#{utility('news')} {
  background: linear-gradient(30deg, #fff 30%, color('athens-gray') 100%);
  margin-bottom: 5em;

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

  .#{molecule('copy')} {
    padding: 2.5em 1.25em 0;
    margin: 0 0 2em;

    @media (min-width: 768px) {
      grid-column: 2 / 11;
      padding: 0;
      margin: auto 0;
    }

    @media (min-width: 1024px) {
      grid-column: 3 / 10;
    }

    @media (min-width: 1280px) {
      grid-column: 3 / 9;
    }

    h2 {
      margin-top: 0;
      margin-bottom: 0.375em;
    }

    p {
      @include txt-2;
      margin-top: 0;
      margin-bottom: 2em;

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

.#{organism('news')} {
  grid-column: 11 / -1;
  width: 100%;

  &-item {
    padding: 0 2em 0 0;
    width: 320px;
    height: 360px;
    margin: 2.125em 0 4.125em;

    @media (min-width: 768px) {
      padding: 0 0 0 2em;
    }

    &:last-child {
      padding-right: 0;
    }

    .#{organism('news')}-card {
      transition: box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);

      &:hover {
        transform: translateY(-0.125em);
        box-shadow: 0 25px 60px 0px transparentize(color('black'), 0.9);
      }
    }

    h5 {
      white-space: break-spaces;
    }
  }

  &-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    box-shadow: 0 15px 30px 0px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  &-title {
    @include txt;
    @include txt-3;
    @include txt-strong;
    @include txt-uppercase;
    padding: 0.625em 24px;
    color: color('river-bed');
  }

  &-image {
    width: 100%;
    background-color: color('blue-ribbon');

    img {
      object-fit: cover;
    }
  }

  &-headline {
    padding: 0 24px;
    margin-top: 1.375em;
  }

  &-date {
    @include txt;
    @include txt-2;
    padding: 0 24px;
    margin-top: auto;
    margin-bottom: 1.5em;
    color: color('river-bed');
  }

  &-icon {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    fill: color('white');
    padding: calc(28.125% - 2em) 0;

    .#{atom('ico')} {
      @include ico;
      @include ico-4;
    }
  }
}
