.categories-blocks {
    position: relative;

    .container {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 48px;

        &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 0;
            width: min(100%, 1004px);
            height: 510px;
            border: 1px solid var(--color-primary-200);
            pointer-events: none;
            transform: translate(-50%, -50%) rotate(15deg);
            transform-origin: center;
        }
    }

    article {
        position: relative;
        z-index: 1;

        a {
            position: relative;
            display: block;
            overflow: hidden;
            aspect-ratio: 1 / 1;
            isolation: isolate;
            background: linear-gradient(180deg, #d9d9d9 0%, #cfcfcf 100%);

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                z-index: 1;
                pointer-events: none;
                background: linear-gradient(180deg,
                        rgba(0, 0, 0, 0.3) 0%,
                        rgba(0, 0, 0, 0.24) 28%,
                        rgba(0, 0, 0, 0.2) 60%,
                        rgba(0, 0, 0, 0.16) 100%);
            }
        }
    }

    .category-image {
        position: relative;
        z-index: 0;
        display: block;
        width: 100%;
        height: 100%;

        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            background: linear-gradient(180deg, #d9d9d9 0%, #cfcfcf 100%);
        }
    }

    .category-texts {
        position: absolute;
        right: 32px;
        bottom: 32px;
        left: 32px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;

        em,
        strong {
            margin: 0;
            color: var(--color-white);
            font-style: normal;
        }

        em {
            font-family: var(--font-family-international), sans-serif;
            font-size: clamp(var(--font-size-xs), calc(18px * (100vw / 1440)), 18px);
            font-weight: 590;
            line-height: 1;
            letter-spacing: 0;
            text-transform: uppercase;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
        }

        strong {
            font-family: var(--font-family-title), serif;
            font-size: clamp(var(--font-size-xs), calc(var(--font-size-xl) * (100vw / 1440)), var(--font-size-xl));
            font-weight: 400;
            line-height: 1;
            text-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
        }
    }

  @media (max-width: 1024px) {
    .container {
      gap: 32px;
    }

        .category-texts {
            right: 28px;
            bottom: 28px;
            left: 28px;
        }
    }

  @media (max-width: 768px) {
    .container {
      gap: 24px;
    }

        .category-texts {
            right: 24px;
            bottom: 24px;
            left: 24px;
        }
    }
}