.product-focus {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 125%;
}

.product-focus__image {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
}

.product-focus .button {
  position: absolute;
  bottom: var(--spacing-2xl);
  left: var(--spacing-2xl);
  z-index: 10;
  width: calc(100% - 2 * var(--spacing-2xl));
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

@media (max-width: 1280px) {
  .product-focus .button {
    bottom: var(--spacing-md);
    left: var(--spacing-md);
    width: calc(100% - 2 * var(--spacing-md));
  }
}

@media (max-width: 800px) {
  .product-focus .button {
    bottom: var(--spacing-2xl);
    left: var(--spacing-2xl);
    width: calc(100% - 2 * var(--spacing-2xl));
  }
}

@media (max-width: 480px) {
  .product-focus .button {
    bottom: var(--spacing-md);
    left: var(--spacing-md);
    width: calc(100% - 2 * var(--spacing-md));
  }
}