.gallery {
  &.section {
  }
  &__box {
    .thumbnail {
      @extend %p-relative;
      border-radius: 40px;
      overflow: hidden;

      @include breakpoint(max-md) {
        border-radius: 15px;
      }
      img {
        @include transition($transition);
      }

      .gallery-link {
        @extend %p-absolute;
        top: 50%;
        left: 50%;
        border-radius: 40px;
        overflow: hidden;
        width: 160px;
        height: 160px;
        border-radius: 100%;
        background-color: $color-primary;
        @include transform(translate(-50%, -50%));
        @include transition($transition);
        opacity: 0;

        @include breakpoint(max-md) {
          border-radius: 15px;
        }
      }
      &:hover {
        .gallery-link {
          opacity: 1;
        }
      }
    }
    .content {
      margin-top: 40px;
      @include breakpoint(max-md) {
        margin-top: 20px;
      }
      .tags {
        @extend %d-flex, %item-center;
        gap: 30px;

        @include breakpoint(max-md) {
          gap: 20px;
        }
        span {
          @extend %d-inline-block;
          color: $color-5;
          font-family: $ff-rubik;
          font-size: 18px;
          font-weight: 400;
          line-height: 1;
          border-radius: 20px;
          border: 1px solid $color-5;
          padding-inline: 20px;
          padding-block: 6.5px;

          @include breakpoint(max-sm) {
            font-size: 16px;
            padding-inline: 15px;
            padding-block: 3px;
          }
        }
      }
      .title {
        margin-top: 16px;
        @include breakpoint(max-md) {
          margin-top: 10px;
        }
      }
    }

    &:hover {
      .thumbnail {
        img {
          &:not(.gallery-link img) {
            @include transform(scale(1.1) rotate(5deg));
          }
        }
      }
    }
  }
}
