/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");

/*=============== VARIABLES CSS ===============*/

/*=============== BASE ===============*/

.hot__container_core {
    display: grid;
    row-gap: 3rem;
    margin: 1.5rem;
    place-items: center;
    margin-inline: 5rem;
    padding-block: 5rem;
    margin-bottom: 5px;
}

.hot__container {
    width: 330px;
    height: 330px;
    border-radius: 165px;
    perspective: 800px;
    position: relative;
    overflow: hidden;
}

.hot__container:hover>.hot__card {
    cursor: pointer;
    transform: rotateY(180deg);
}

.hot__card {
    height: 100%;
    width: 100%;
    position: relative;
    transition: transform 1500ms;
    transform-style: preserve-3d;
}

.hot__front,
.hot__back {
    height: 100%;
    width: 100%;
    border-radius: 110px;
    box-shadow: 0 0 5px 2px rgba(50, 50, 50, 0.25);
    position: absolute;
    backface-visibility: hidden;
}

.hot__front {
    background-repeat: no-repeat;
}
.hot__front_img1 {
    background: url(../IMG/LOGO\ Hotlines/ANUSBIS.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.hot__front_img2 {
    background: url(../IMG/LOGO\ Hotlines/RA-PTAH.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.hot__front_img3 {
    background: url(../IMG/LOGO\ Hotlines/ROSE.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.hot__front_img4 {
    background: url(../IMG/LOGO\ Hotlines/RAVE.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.hot__front_img5 {
    background: url(../IMG/LOGO\ Hotlines/CROC-ODILE.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.hot__front_img6 {
    background: url(../IMG/LOGO\ Hotlines/OASIS.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.hot__back {
    background-color: #786659;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;
}

.hot__back p {
    margin-left: 10%;
    margin-right: 10%;
}

.hot_nb {
    font-size: 150%;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 860px) {
    .hot__container_core {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* For small devices */
@media screen and (min-width: 860px) {
    .hot__container_core {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* For medium devices */
@media screen and (min-width: 1150px) {
    .hot__container_core {
        grid-template-columns: repeat(3, 1fr);
    }
}