/* Change background colour and align content horizontally for hero image */
.hero {
    background-color: #FEFAF5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3.125rem;
    padding: 8.125rem 6.25rem 5rem 6.25rem;
}

/* Adjust width of the text ont he left side */
.hero__text {
    text-align: left;
    width: 45vw;
}

/* Have all chldren elements of .hero__text to have padding */
.hero__text > * {
    padding: .9375rem 0rem;
}

/* Font size of hero title */
.hero-text__title {
    font-size: 2.5625rem;
}

/* Hero button */
.hero__btn {
    background-color: #DB7A4E;
    color: #FFFFFF;
    border: #DB7A4E;
    border-radius: 2.5rem;
    width: 28%;
    padding: .625rem 0rem;
    margin: 1.25rem 0rem;
}

/* Adjust hero image */
.hero__img {
    width: 33vw;
    height: auto;
}

/* Adjust padding for section */
.recos {
    padding: 2.5rem 6.25rem;
}

/* Customize card with box shadow, make images background */
.card-recos {
    border: .0625rem rgba(0, 0, 0, 0.2); /* Solid black border with 20% opacity */
    box-shadow: 0rem .25rem .25rem rgba(0, 0, 0, 0.2); /* Box shadow with specified offsets and blur */
    position: relative;
    background-size:contain;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

/* Change the following background images for reach block */
.card-recos__bg--hawaii {
    background-image: url("../assets/images/hawaii.jpg");
}

.card-recos__bg--iceland {
    background-image: url("../assets/images/iceland.jpg");
}

.card-recos__bg--greece {
    background-image: url("../assets/images/greece.jpg");
}

/* Adjust text of the card */
.card-recos__title {
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    color: #FFFFFF; 
}