.featured-collection {
  height: 20vh;
  padding: 1.2rem 2.8rem;
  background: var(--featured-collection-background);
  overflow: hidden;
  border-radius: var(--collection-card-corner-radius);

  a {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .featured-collection__title h2 {
    color: var(--featured-collection-color);
    margin: 0;
  }

  .featured-collection__content {
    height: 100%;
    display: grid;
    align-items: end;
    grid-template-columns: 30% 70%;

    .featured-collection__image {
      height: 100%;
      position: relative;

      img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform: translateY(3rem);
      }
    }
  }

  .button.button--primary {
    background-color: var(--featured-collection-color);
    color: var(--featured-collection-background);
    height: fit-content;
    gap: 0.8rem;
    min-height: fit-content;
    padding: 0.8rem 1rem;

    &:after {
      box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
        rgba(var(--color-button-text), var(--border-opacity)),
        0 0 0 var(--buttons-border-width) var(--featured-collection-color);
    }
  }
}

@media screen and (min-width: 750px) {
  .featured-collection {
    padding: 2rem 4rem;
    height: 30vh;

    .featured-collection__content .featured-collection__image {
      height: 100%;

      img {
        transform: translateY(8rem);
        transition: transform 0.4s ease-in-out;
      }
    }

    &:hover {
      .featured-collection__image img {
        transform: translateY(3rem);
      }
    }
  }
}