/**
 * @file
 * Instagram
 *
 * Contains styles for instagram object.
 */

@use '_helper' as *;

.instagram {
  &__tile {
    position: relative;
    padding-top: 100%;
    border-radius: rem(15px);
    overflow: hidden;

    @media (min-width: $break-medium) {
      padding-top: calc((100% / 3) - (20px / 3));
    }

    @media (min-width: $break-large) {
      padding-top: calc((100% / 3) - (30px / 2));
    }

    &:before {
      content: '';
      position: absolute;
      left: rem(20px);
      bottom: rem(20px);
      display: block;
      width: rem(30px);
      height: rem(30px);
      background: url('../../assets/icons/instagram.svg');
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 1;
      pointer-events: none;

      @media screen and (min-width: $break-medium) {
        left: rem(11.5px);
        bottom: rem(11.5px);
        width: rem(17.5px);
        height: rem(17.5px);
      }

      @media screen and (min-width: $break-large) {
        left: rem(20px);
        bottom: rem(20px);
        width: rem(30px);
        height: rem(30px);
      }
    }
  }

  &__link {
    @include focus-light(-12px);
    @include ir;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
  }
}