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

.text {
    font-size: 12px;
    color: $colors_yellow;
    text-decoration: none;

    display: none;

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

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

.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;
        }
    }
    
}