@import url(styles.css);

/* HERO RESPONSIVE */

.container-hero {
    @media screen and (max-width:768px) {
    & {
        display: flex;
        flex-direction: column;
        margin-left: auto;
      }

      .rectangle-box {
        width: 365px;
        height: 836px;
        justify-content: start;
      }

      .imagenhero img {
            width: 365px;
            height: 418px;
            
      }
        
      .box {
            width: 365px;
            height: 418px;
            border-radius:7px;
            justify-content: start;
            position: static;
            text-align: center;    
            }

            .CUERPO2medium {
                font-size: .75em;
                margin-top: -22px;
            }

            .Cuerpocursiva {
                font-size: .75em;
            }

            .CormorantUpright {
                font-size: .75em;
            }

            .boton_hero {
                margin-top: -1%;
            }  

            button {
                width: 229px;
                height: 55px;
            }

            .botonsalmon_responsive {
                background-color: #f9ecf2;
                letter-spacing: 1px;
                border-radius: 7px;
                box-shadow: 5px 15px 25px #acacac;
                width: 229px;
                height: 55px;
                cursor: pointer;
            }

            .botonsalmon_responsive:hover {
                background-color:#f9ebce;
                transform: scale(1.05);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }

            .botonsalmon_responsive a {
                text-decoration: none;
                color: #312A1B;
                cursor: pointer;
            }

            .botonsalmon_responsive a:hover {
                color:#767676;
            }



 
    }
}

.rectangle-box {
    @media screen and (max-width:768px) {
    & {
        display: flex;
        flex-direction: column;      
      }
    }  
}