@import "base.css";

.reference {
    width: 100%;
}

.reference.hide {
    display: none;
}

.reference .background {
    width: 100%;
    height: 44vw;
    background: linear-gradient(
            rgba(41, 40, 39, 0.4),
            rgba(58, 57, 56, 0.3),
            rgba(49, 48, 47, 0.2),
            rgba(48, 46, 45, 0.1)
        ),
        url("../../images/reference/background.webp");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reference .background h1 {
    color: var(--bg);
    font-size: 4vw;
    font-weight: 500;
}

.reference .reference-container {
    width: 100%;
    margin-top: 10%;
}

.reference .buildings {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.reference .buildings h1 {
    text-align: center;
    margin-bottom: 10%;
    width: 100%;
    background-color: var(--main);
    color: var(--bg);
    font-size: 4vw;
}

.reference .buildings .items {
    padding: 0 10%;
    width: 100%;
    display: grid;
    grid-template-columns: 50% 45%;
    grid-template-rows: 42% 25%;
    grid-gap: 10px;
}

.reference .buildings .items .item-1 {
    background: url("../../images/reference/reference-1.webp");
    background-size: cover;
    height: 40vw;
}

.reference .buildings .items .item-2 {
    background: url("../../images/reference/reference-2.webp");
    background-size: cover;
    width: 105%;
    margin-left: 10px;
    position: relative;
    bottom: 5vw;
    height: 45vw;
}

.reference .buildings .items .item-3 {
    background: url("../../images/reference/reference-3.webp");
    background-size: cover;
    margin-top: 15%;
    width: 70%;
    height: 35vw;
}

.reference .buildings .items .item-4 {
    background: url("../../images/reference/reference-4.webp");
    background-size: cover;
    width: 140%;
    margin-left: -29%;
    height: 35vw;
    margin-top: 17%;
}

.reference .hotel {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.reference .hotel h1 {
    text-align: center;
    margin-bottom: 10%;
    width: 100%;
    background-color: var(--main);
    color: var(--bg);
    font-size: 4vw;
}

.reference .hotel .items {
    padding: 0 10%;
    width: 100%;
    display: grid;
    grid-template-columns: 50% 45%;
    grid-template-rows: 42% 25%;
    grid-gap: 10px;
}

.reference .hotel .items .item-1 {
    background: url("../../images/reference/reference-5.webp");
    background-size: cover;
    height: 20vw;
}

.reference .hotel .items .item-2 {
    background: url("../../images/reference/reference-6.webp");
    background-size: cover;
    width: 105%;
    margin-left: 10px;
    position: relative;
    bottom: 5vw;
    height: 25vw;
}

.reference .hotel .items .item-3 {
    background: url("../../images/reference/reference-7.webp");
    background-size: cover;
    margin-top: 2%;
    width: 70%;
    height: 25vw;
}

.reference .hotel .items .item-4 {
    background: url("../../images/reference/reference-8.webp");
    background-size: cover;
    width: 140%;
    margin-left: -29%;
    height: 25vw;
    margin-top: 1%;
}

.reference .vila {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 5vw;
}

.reference .vila h1 {
    text-align: center;
    margin-bottom: 10%;
    width: 100%;
    background-color: var(--main);
    color: var(--bg);
    font-size: 4vw;
}

.reference .vila .items {
    padding: 0 5%;
    width: 100%;
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-template-rows: 42% 55%;
    grid-gap: 1vw;
}

.reference .vila .items .item-1 {
    background: url("../../images/reference/reference-9.webp");
    background-size: cover;
    height: 27vw;
    width: 105%;
}

.reference .vila .items .item-2 {
    background: url("../../images/reference/reference-10.webp");
    background-size: cover;
    width: 105%;
    margin-left: 2vw;
    position: relative;
    height: 30vw;
    top: 2vw;
}

.reference .vila .items .item-3 {
    background: url("../../images/reference/reference-11.webp");
    background-size: cover;
    width: 100%;
    height: 32vw;
    margin-left: 5vw;
}

.reference .vila .items .item-4 {
    background: url("../../images/reference/reference-12.webp");
    background-size: cover;
    width: 100%;
    position: relative;
    height: 35vw;
    margin-top: 17%;
    bottom: 5.5vw;
}

.reference .vila .items .item-5 {
    background: url("../../images/reference/reference-13.webp");
    background-size: cover;
    margin-top: 15%;
    width: 215%;
    height: 30vw;
    margin-left: 2vw;
}

.text-project h1 {
    display: flex;
    justify-content: center;
    font-size: 3vw;
    font-weight: 500;
    color: var(--main);
}

.text-project {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.text-project p {
    display: flex;
    justify-content: center;
    font-size: 1.3vw;
    font-weight: 300;
    text-align: center;
}

.buildings-2 .items .item-1 {
    background: url("../../images/reference/reference-14.webp") !important;
}
.buildings-2 .items .item-2 {
    background: url("../../images/reference/reference-15.webp") !important;
}
.buildings-2 .items .item-3 {
    background: url("../../images/reference/reference-16.webp") !important;
}
.buildings-2 .items .item-4 {
    background: url("../../images/reference/reference-17.webp") !important;
}
.buildings-2 .items .item-1,
.buildings-2 .items .item-2,
.buildings-2 .items .item-3,
.buildings-2 .items .item-4 {
    background-size: cover !important;
}

.vila-2 .items .item-1 {
    background: url("../../images/reference/reference-18.webp") !important;
}
.vila-2 .items .item-2 {
    background: url("../../images/reference/reference-19.webp") !important;
}
.vila-2 .items .item-3 {
    background: url("../../images/reference/reference-20.webp") !important;
}
.vila-2 .items .item-4 {
    background: url("../../images/reference/reference-21.webp") !important;
}
.vila-2 .items .item-5 {
    background: url("../../images/reference/reference-22.webp") !important;
}
.vila-2 .items .item-1,
.vila-2 .items .item-2,
.vila-2 .items .item-3,
.vila-2 .items .item-4,
.vila-2 .items .item-5 {
    background-size: cover !important;
}

.vila-3 .items .item-1 {
    background: url("../../images/reference/reference-23.webp") !important;
}
.vila-3 .items .item-2 {
    background: url("../../images/reference/reference-24.webp") !important;
}
.vila-3 .items .item-3 {
    background: url("../../images/reference/reference-25.webp") !important;
}
.vila-3 .items .item-4 {
    background: url("../../images/reference/reference-26.webp") !important;
}
.vila-3 .items .item-5 {
    background: url("../../images/reference/reference-27.webp") !important;
}
.vila-3 .items .item-1,
.vila-3 .items .item-2,
.vila-3 .items .item-3,
.vila-3 .items .item-4,
.vila-3 .items .item-5 {
    background-size: cover !important;
}

@media screen and (max-width: 900px) {
    .text-project h1 {
        font-size: 3.5vw;
    }
    .text-project p {
        margin-top: 5%;
        width: 100%;
        font-size: 3.5vw;
    }
}