.tile {
    --tile-width: 25rem;
    --tile-gap: 1.5rem;
    --tile-scale: 1.06;
    display: grid;
    align-content: start;
    gap: var(--tile-gap);
    position: relative;
    z-index: 10;
    min-width: max(var(--tile-width), 25rem);
    min-height: max(var(--tile-width)*1.2, 30rem);
    max-width: calc(2*var(--tile-width));
    padding: 3rem;
    background-color: var(--color-background-dimmed)
}

@media (max-width: 1023px) {
    .tile {
        --tile-scale: 1
    }
}

.tile__link {
    display: grid;
    gap: var(--tile-gap)
}

@media (hover: none) {
    .tile__link {
        display: contents
    }
}

.tile__link .tile__title,
.tile__link .rich-text {
    text-wrap: initial
}

@media (hover: hover) {

    .tile__link .tile__title,
    .tile__link .rich-text {
        text-decoration: underline;
        text-decoration-color: #0000;
        transition: text-decoration-color var(--duration-fast)
    }
}

.tile__link .rich-text:after {
    content: "";
    display: inline-block;
    height: 1em;
    width: 2em
}

.tile__link .arrow-right,
.tile__link .arrow-top-right {
    position: absolute;
    bottom: 3rem;
    right: 3rem;
    color: var(--color-strong)
}

@media (hover: hover) {

    .tile__link .arrow-right,
    .tile__link .arrow-top-right {
        transition: translate var(--duration-default);
        will-change: translate
    }
}

@media (hover: hover) {
    .tile__link:hover .tile__hero {
        scale: var(--tile-scale)
    }

    .tile__link:hover .tile__hero .image__content {
        scale: 1
    }

    .tile__link:hover .tile__title,
    .tile__link:hover .rich-text {
        text-decoration-color: currentColor
    }

    .tile__link:hover .arrow-right {
        translate: .5em
    }

    .tile__link:hover .arrow-top-right {
        translate: .35em -.35em
    }
}

@media (hover: hover) {
    .tile__link body:not(.is-tabbed) {
        display: contents
    }
}

.tile__hero.image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    transform-origin: bottom;
    transition: scale var(--duration-default);
    will-change: transform
}

.tile__hero .image__content {
    scale: var(--tile-scale);
    transition: inherit;
    will-change: transform
}

.tile__title {
    font-weight: inherit !important
}

.tile .heading {
    font-weight: 700
}

.tile__number {
    color: var(--color-strong);
    font-size: 6rem;
    line-height: var(--line-height-h1);
    white-space: nowrap
}

@media (hover: none) {
    .tile:has(.tile__hero) {
        padding-top: calc(50% + 2rem)
    }
}

.tile:has(.tile__hero) .tile__link {
    padding-top: calc(50% + 2rem)
}

.tile:has(.tile__icon) {
    padding-top: 4rem
}

.tile:has(.tile__icon) .tile__icon {
    display: inline-grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: var(--color-brand)
}

.tile.link {
    --tile-link-duration: var(--duration-default);
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    transition: z-index var(--tile-link-duration)
}

@media (hover: hover) {

    .tile.link:before,
    .tile.link:after,
    .tile.link .tile__link:before,
    .tile.link .tile__link:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -10;
        transition-duration: var(--tile-link-duration)
    }
}

@media (hover: hover) {

    .tile.link:before,
    .tile.link .tile__link:before {
        box-shadow: var(--box-shadow);
        opacity: 0;
        transition-property: opacity;
        will-change: opacity
    }
}

@media (prefers-contrast: more) {

    .tile.link:before,
    .tile.link .tile__link:before {
        border: 2px solid
    }
}

@media (forced-colors: active) {

    .tile.link:before,
    .tile.link .tile__link:before {
        border: 2px solid
    }
}

@media (hover: hover) {

    .tile.link:after,
    .tile.link .tile__link:after {
        background-color: var(--color-background-dimmed);
        transition-property: transform;
        will-change: transform
    }
}

.tile.link .link__icon,
.tile.link .tile__link .link__icon {
    --icon-size: 2rem;
    height: auto;
    width: auto;
    position: absolute;
    bottom: 3rem;
    right: 3rem;
    background: none;
    border-radius: 0;
    color: var(--color-strong)
}

@media (hover: hover) {

    .tile.link .link__icon,
    .tile.link .tile__link .link__icon {
        transition: translate var(--tile-link-duration);
        will-change: translate
    }
}

@media (hover: hover) {

    .tile.link:hover,
    .tile.link .tile__link:hover {
        z-index: 20
    }

    .tile.link:hover:before,
    .tile.link .tile__link:hover:before {
        opacity: 1
    }

    .tile.link:hover:after,
    .tile.link .tile__link:hover:after {
        transform: scale(var(--tile-scale))
    }

    .tile.link:hover .tile__hero,
    .tile.link .tile__link:hover .tile__hero {
        scale: var(--tile-scale)
    }

    .tile.link:hover .tile__hero .image__content,
    .tile.link .tile__link:hover .tile__hero .image__content {
        scale: 1
    }

    .tile.link:hover .link__icon[style*=arrow-right],
    .tile.link .tile__link:hover .link__icon[style*=arrow-right] {
        translate: .5em
    }

    .tile.link:hover .link__icon[style*=arrow-top-right],
    .tile.link .tile__link:hover .link__icon[style*=arrow-top-right] {
        translate: .35em -.35em
    }
}

.tile.link:has(.tile__hero) {
    grid-template-rows: 1fr;
    padding-top: calc(50% + 2rem)
}

.tile.link:has(.tile__hero) .heading {
    align-self: start;
    font-weight: 400;
    text-wrap: wrap
}

.tile.link:has(.tile__hero) .tags {
    padding-right: 3rem
}

.tile.link:has(.tile__hero) .tags__tag {
    background-color: var(--color-background);
    border-radius: 50vw;
    padding: 0 1rem
}