.media-results-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 25px;
    padding: 0 15px 25px 15px;
}

    .media-results-wrapper .media-result .image-wrapper {
        display: block;
        position: relative;
        overflow: hidden;
        margin-bottom: 10px;
    }

        .media-results-wrapper .media-result .image-wrapper img {
            width: 100%;
            transition: transform 0.3s ease-in-out;
        }

    .media-results-wrapper .media-result:hover .image-wrapper img {
        transform: scale(1.1);
    }

    .media-results-wrapper .media-result .image-wrapper svg {
        position: absolute;
        bottom: 10px;
        left: 10px;
        width: 24px;
        height: 24px;
        fill: white;
        transition: fill 0.3s ease-in-out;
    }

    .media-results-wrapper .media-result:hover .image-wrapper svg {
        fill: #C30000;
    }

    .media-results-wrapper .media-result .image-wrapper .overlay-shadow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.40) 100%);
    }

    .media-results-wrapper .media-result .tags {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 5px;
    }

        .media-results-wrapper .media-result .tags .premium {
            color: #F0D66A;
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .media-results-wrapper .media-result .tags .red {
            font-size: 14px;
            font-weight: 400;
            text-transform: uppercase;
        }

    .media-results-wrapper .media-result h6 {
        font-family: Roboto, sans-serif;
        font-size: 18px;
        font-weight: 500;
        margin: 0;
        transition: color 0.3s ease-in-out;
    }

    .media-results-wrapper .media-result:hover h6 {
        color: #c30000;
    }

@media screen and (min-width: 768px) {
    .media-results-wrapper {
        flex-direction: row;
        row-gap: 40px;
        column-gap: 2%;
        flex-wrap: wrap;
        padding: 0 1.683% 40px 1.683%;
    }

        .media-results-wrapper .media-result {
            width: 32%;
        }

            .media-results-wrapper .media-result h6 {
                margin: 0;
            }
}

@media screen and (min-width: 992px) {
    .media-results-wrapper {
        column-gap: 1.82%;
    }

        .media-results-wrapper .media-result {
            width: 23.63%;
        }
}