/*
Block Name: Three Blocks
Description:
*/




.three-blocks h3 {color: #fff; margin-top: 3rem;}


/* Default aspect ratio 5:4 for screens wider than 1500px */
.aspect-ratio-grid.three-blocks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100vw;
    gap: 0;
}

.grid-2.aspect-ratio-grid.three-blocks {
    grid-template-columns: repeat(2, 1fr);
}

.grid-2.aspect-ratio-grid.three-blocks .col:before {
}

.aspect-ratio-grid.three-blocks .col {
    position: relative;
    overflow: hidden;
}

.aspect-ratio-grid.three-blocks .col:before {
    content: "";
    display: block;
}

.content-wrapper {
/*     position: absolute; */
    top: 0;
    right: 0;
    display: grid;
    bottom: 0;
    left: 0;
    padding: 4rem;
    color: #fff;
    gap: 5rem;
	height: 100%;
}

.content-wrapper a.button{
	max-width: 95%;
    width: max-content;
	position: absolute;
	bottom: 4rem;
	left: 50%;
	transform: translatex(-50%);
}

.content-wrapper .content-bottom{padding-bottom: 6rem;}

.three-blocks .col-1 {
    background-size: cover;
    background-position: center;
}

.three-blocks .col-2 {
    background-size: cover;
    background-position: center;
}

.three-blocks .col-3 {
    background-size: cover;
    background-position: center;
}

/* Media query: Switch to aspect ratio 4:5 for screens smaller than 1500px */
@media (max-width: 1500px) {

}

@media(max-width: 1024px) {
    .three-blocks h3{margin-top: 1rem;}
}

@media(max-width: 768px) {
    .block-three-blocks .content-wrapper{position: static;}
    .block-three-blocks .grid{grid-template-columns: 1fr !important;}
    .aspect-ratio-grid.three-blocks .col:before{display: none;}

    .content-wrapper a.button{position: static;}
}