@media (max-width: 991px) {

    h2 {
        font-size: 21px!important;
    }

    #hero {
        background: url("images/hero_mobile.jpg") no-repeat 53% top / cover!important;
        height: 70vh!important;
    }

	#hero::after {
		display:none;
	}

    #hero::before {
        content: '' !important;
        position: absolute;
        left: 0;
        right: 0;
        top: auto !important;
        bottom: 0 !important;
        width: 100%;
        height: 220px !important;
        background: url("images/caffe.png") no-repeat center bottom / contain!important;
        pointer-events: none;
        z-index: 0;
    }

    #hero .hero-title h1 {
        font-size: 30px!important;
    }
    #hero blockquote {
        font-size: 18px!important;
    }
    #hero blockquote img {
        width: 90px;
    }

    .prize-item {
        row-gap: 15px!important;
    }

    #rules .rules-item {
        text-align: center!important;
        background-position-y: center!important;
    }

    #rules .rules-item .item-num {
        background-position: center!important;
        width: 100%!important;
        margin-bottom: 15px!important;
    }

    .prize-item.main {
        flex-direction: column!important;
    }

    .prize-item-pic .prize-label {
        font-size: 16px!important;
        padding: 10px 20px!important;
    }
    .prize-preview span {
        width: 100%!important;
        margin:0!important;
    }
    .prize-item-name {
        text-align: center!important;
    }

	.blurred {
		grid-template-columns:1fr;
        row-gap: 0;
	}

	.prize-title {
		font-size: 20px!important;
	}

	.prize-preview {
		font-size: 16px!important;
	}

}

@media (max-width: 1200px) {
    #prizes::after, #faq::after, #rules::after {
        content: none!important;
    }
}