.tb-related-links {
    width: 100%;
    max-width: var(--tb-breakpoint-medium);
    padding: var(--tb-spacing-100) var(--tb-spacing-60);
    display: flex;
    flex-direction: column;
    gap: var(--tb-spacing-40);
}

.tb-related-links-tiles {
    --tb-related-links-gap: var(--tb-spacing-40);
    display: flex;
    flex-wrap: wrap;
    gap: var(--tb-related-links-gap);
}

.tb-related-links-tile {
    width: 100%;
    max-width: calc((100% - var(--tb-related-links-gap)) / 2);
    display: flex;
    flex-direction: column;
    gap: var(--tb-spacing-20);
}

.tb-related-links-tile:hover,
.tb-related-links-tile:focus {
    text-decoration: none;
}

.tb-related-links-tile img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.tb-related-links.tb-theme-yellow {
    background-color: var(--tb-color-yellow-200);
    color: var(--tb-color-yellow-800);
}

.tb-related-links.tb-theme-blue {
    background-color: var(--tb-color-blue-100);
    color: var(--tb-color-blue-800);
}

.tb-related-links.tb-theme-green {
    background-color: var(--tb-color-green-100);
    color: var(--tb-color-green-800);
}

@media (max-width: 1024px) {
    .tb-related-links {
        padding: var(--tb-spacing-50);
    }

    .tb-related-links-tile {
        max-width: 100%;
    }

    .tb-related-links.tb-panel-50 {
        max-width: calc(100% / 2);
    }
}

@media (max-width: 768px) {
    .tb-related-links {
        order: 2;
    }

    .tb-related-links.tb-panel-50 {
        max-width: 100%;
    }

    .tb-related-links-tile {
        max-width: calc((100% - var(--tb-related-links-gap)) / 2);
    }
}

@media (max-width: 500px) {
    .tb-related-links {
        padding: var(--tb-spacing-50) var(--tb-spacing-20);
    }

    .tb-related-links-tile {
        max-width: 100%;
    }
}