ExplorerIndexPage.scss

.explorer-index-page {
    .explorer-index-page__header {
        background-color: #f0f4fa;
        margin-bottom: 16px;
        padding-bottom: 24px;
        .h1-semibold {
            margin-top: 24px;
            margin-bottom: 8px;
            @include sm-up {
                font-size: 2rem;
            }
        }
        p {
            margin: 0;
            color: #46688f;
        }
    }
    .explorer-index-page-list {
        background-color: #fff;
        list-style: none;
        row-gap: var(--grid-gap);

        li {
            overflow: auto; // prevents grid items from blowing up in width if some img's fail to load
        }

        .explorer-index-page__card {
            display: block;
            height: 100%;
            padding: 8px;
            display: flex;
            flex-direction: column;
            &:hover {
                h2 {
                    text-decoration: none;
                }
                img {
                    box-shadow: 0px 0px 20px 0px rgba(49, 37, 2, 0.07);
                }
            }
            img {
                background: $gray-5;
                transition: 150ms;
                box-shadow: 0px 0px 12px 0px rgba(49, 37, 2, 0.05);
            }
            h2 {
                @include owid-link-90;
                @include h3-bold;
                font-weight: bold;
                margin-top: 8px;
                margin-bottom: 8px;
            }
            p {
                color: $blue-90;
                margin-top: 0;
            }
        }
    }
    @keyframes fadein {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    .explorer-index-page__card-error {
        width: 100%;
        aspect-ratio: 850/600;
        background-color: $gray-5;
        color: $grey-text-color;
        font-size: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        svg {
            margin-bottom: 16px;
        }
        svg,
        p {
            animation: fadein ease 0.3s;
        }
    }
}