[section="collections"] {
  display: grid;
  gap: var(--spacing-12);
}

[section="collections"] .section-core {
    display: grid;
    gap: var(--spacing-12);
    grid-template-columns: repeat(2, 1fr);
  }

:is([section="collections"] .section-core) [block="collection"] {
      display: grid;
      gap: var(--spacing-12);
      height: calc(35vh - var(--spacing-6));
    }

:is(:is([section="collections"] .section-core) [block="collection"]):first-child {
        height: 70vh;
        grid-row: 1 / 3;
        position: relative;
      }

:is(:is([section="collections"] .section-core) [block="collection"]):first-child .content {
          width: 30%;
          position: absolute;
          inset-inline-start: var(--spacing-24);
          inset-block-end: var(--spacing-24);
        }

:is(:is([section="collections"] .section-core) [block="collection"]):nth-child(2) {
        grid-template-columns: 60% auto;
      }

:is(:is([section="collections"] .section-core) [block="collection"]):nth-child(3) {
        grid-template-columns: auto 60%;
      }

:is(:is([section="collections"] .section-core) [block="collection"]):nth-child(3) .content {
          order: -1;
        }

:is(:is([section="collections"] .section-core) [block="collection"]) .media {
        width: 100%;
        height: inherit;
        overflow: hidden;
        position: relative;
        border-radius: var(--radius-md);
        background-color: var(--color-surface-container);
      }

:is(:is(:is([section="collections"] .section-core) [block="collection"]) .media) img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

:is(:is(:is([section="collections"] .section-core) [block="collection"]) .media) > [ui-icon] {
          opacity: 0.3;
          position: absolute;
          translate: -50% -50%;
          left: 50%;
          inset-block-start: 50%;
        }

:is(:is([section="collections"] .section-core) [block="collection"]) .content {
        text-decoration: none;
        border-radius: var(--radius-md);
        padding: calc(var(--spacing-48) - var(--spacing-8));
        display: flex;
        gap: var(--spacing-24);
        flex-direction: column;
        justify-content: space-between;
        color: var(--color-on-theme);
        background-color: var(--color-theme);
      }

:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .text {
          display: grid;
          gap: var(--spacing-8);
        }

:is(:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .text) .title {
            font: var(--font-title-lg);
          }

:is(:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .text) .description {
            opacity: 0.8;
            text-wrap: balance;
          }

:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .action {
          color: inherit;
          width: fit-content;
        }

:is(:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .action)::before {
            background-color: currentColor;
          }

/* Responsive */
@media (max-width: 1280px) {
    [section="collections"] .section-core {
      grid-template-columns: 1fr;
    }
}

@media (max-width: 769px) {
      :is([section="collections"] .section-core) [block="collection"] {
        height: auto !important;
        grid-template-columns: 1fr !important;
      }

        :is(:is([section="collections"] .section-core) [block="collection"]) .media {
          order: -1;
          height: calc(35vh - var(--spacing-6));
        }

        :is(:is([section="collections"] .section-core) [block="collection"]) .content {
          width: 100% !important;
          position: static !important;
          padding: calc(var(--spacing-24) + var(--spacing-8));
          background-color: var(--color-surface-container-low) !important;
        }

          :is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .text,:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .action,:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .description {
            color: var(--color-on-background) !important;
          }

            .description:is(:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .text,:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .action,:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .description) {
              opacity: 0.7 !important;
            }
}