.hero {
    position: relative;
    margin: 0 -20px;
    box-sizing: border-box;
}
.hero.xxl{
    height: 580px;
    padding-top: 100px;
}
.hero.xl {
  height: 440px;
  padding-top: 40px;
}

    .hero > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        object-fit: cover;
    }
    .hero.xxl > img {
        height: 580px;
    }
    .hero.xl > img {
        height: 440px; 
    }
        .tile {
            width: 400px;
            background-color: #fff;
            border-radius: 4px;
            padding: 30px;
        }
        .hero .tile {
            position: relative;
        }
        .hero.xxl .tile {
            max-height: 580px;
            width: 480px;
        }
        .hero.xl .tile {
            max-height: 320px;
            width: 580px;
            overflow: hidden; 
        }
            .hero .tile .snippet {
                position: relative;
                width: 100%;
                line-height: 22px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .hero.xxl .tile .snippet {
                height: 201px;
            }
                .tile .heading {
                    margin-bottom: 20px;
                }
                .hero .tile .snippet h1 {
                    position: relative;
                    margin-bottom: 12px;
                }
                .hero .tile .snippet p {
                    margin: 20px 0;
                }





/* MEDIA QUERIES */
@media (max-width: 640px) {
	.hero.xl,
	.hero.xxl{
        padding-top: 16px;
    }
		.tile,
		.hero.xxl .tile,
		.hero.xl .tile{
			width: auto;
			max-height: none;
		}
            .hero.xl .tile .snippet {
                height: auto;
				max-height: 260px;
            }
			.hero.xxl .tile .snippet {
                height: auto;
				max-height: 360px;
            }
            .hero .tile .snippet h1{
                margin-bottom: 10px;
            }
}