.tile {
    display: block;
    container-name: tile;
    container-type: inline-size;
    width: 100%;
}

.tile-content {
    display: grid;
    grid-template-columns: 1fr;
    place-content: center;
    place-items: center;
    text-align: center;
    gap: 2rem;
    width: 100%;
}

.tile-image {
    width: 100%;
    max-width: 24rem;
    height: auto;
}

.tile-body {
    padding: 0 1.5rem;
    width: 100%;
}

.tile-number {
	font-size: 2rem;
	background-color: var(--color-secondary);
	color: var(--color-white);
	font-weight: 700;
	border-radius: 50%;
	width: 7rem;
	height: 7rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
    margin-bottom: 1.5rem;
}


.tile-title {
    margin-bottom: 1rem;
}


@container tile (min-width: 640px) {
    .tile-content {
        gap: 3rem;
    }
}

@container tile (min-width: 960px) {
    .tile-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
        text-align: left;
    }

    .tile-image {
        width: 100%;
        max-width: 38rem;
        height: auto;
        justify-self: end;
    }

    .tile-body {
        padding: 0;
        padding-left: 8.5rem;
        max-width: 38rem;
        justify-self: start;
        position: relative;
    }

    .tile-number {
        position: absolute;
        top: -1rem;
        left: -8.5rem;
    }
}

@container tile (min-width: 1280px) {
    .tile-content {
        gap: 5rem;
    }
}