/*Font Sizes*/
/*Font Sizes*/
.tile-container {
display: inline-block;
width: 100%;
margin-top: 2rem;
}
.tile-container > .tile {
width: 100%;
padding: 1rem;
float: left;
text-decoration: none;
}
.tile-container > .tile > .tile-content {
background-color: var(--color-yellow);
border-radius: 0.3rem;
}
.tile-container > .tile > .tile-content > .tile-image {
height: 12rem;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: var(--color-grey-light);
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}
.tile-container > .tile > .tile-content > .tile-details {
padding: 1rem;
min-height: 253px;
}
.tile-container > .tile > .tile-content > .tile-details > .tile-title {
margin: 1rem 0;
font-size: 1.3rem;
font-weight: 600;
text-align: center;
min-height: 62px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tile-container > .tile > .tile-content > .tile-details > .tile-description {
margin-bottom: 1.5rem;
min-height: 48px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tile-container > .tile > .tile-content > .tile-details > button {
display: block;
width: 14rem;
max-width: 95%;
margin: 0 auto 1rem;
padding: 0.5rem 1rem;
border: 2px solid white;
background-color: transparent;
border-radius: 0.3rem;
text-transform: uppercase;
font-size: 0.8rem;
color: var(--color-brown-dark);
}
.tile-container > .tile > .tile-content > .tile-details > button:before {
    content: "Book Now";
}
.tile-container > .tile:hover > .tile-content {
cursor: pointer;
}
.tile-container > .tile:hover > .tile-content > .tile-details > button {
background-color: var(--color-yellow-dark);
transition-duration: 0.2s;
}
.tile-container > .tile:hover > .tile-content:hover > .tile-details > button {
background-color: var(--color-yellow-very-dark);
}
@media only screen and (min-width: 800px) {
.tile-container > .tile {
width: 50%;
}
}
@media only screen and (min-width: 1300px) {
.tile-container > .tile {
width: 33.3333%;
}
}