@import 'spacing';
@import 'breakpoints';

.text {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;

    display: none;

    @media only screen and (min-width: $tablet) {
        display: block;
    }
}

.image, .imgPlaceholder {
    border-radius: $spacing_4;
    width: 100%;

    @media only screen and (max-width: $tablet) {
        height: $spacing_64 + $spacing_8;
    }

    @media only screen and (min-width: $tablet) {
        height: $spacing_64 * 3;
    }
}

.imgPlaceholder {
    background-color: var(--primary-focus);
}

.thumbnailContainer {
    opacity: 0.1;
    transition: 1s;

    a {
        text-decoration: none !important;
    }
}

.thumbnailContainer:hover {
    opacity: 1;
}

.thumbnailContainer.show {
    opacity: 1;

    .text {
        display: block;
    }

    .image {
        width: 100%;

        @media only screen and (min-width: $tablet) {
            width: auto;
        }
    }

    .image, .imgPlaceholder {
        @media only screen and (min-width: $small) {
            height: $spacing_64 * 3;
        }
    }
    
}