.city{
  min-height:100px;
  max-width: 1800px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  column-gap:20px;
  row-gap:20px;
  
}

.subhead {
    font-size: calc(0.56vw + 0.7rem);
    font-family: verdana;
    font-weight: normal;
    font-style: normal;
    white-space: nowrap;
}

.box {
    height: auto;
    width: 40%;
    min-width: 290px;
    max-width: 600px;
   
    border-radius: 10px;
    opacity: 0;
    box-shadow: rgba(0, 112, 255, 0.2) 2px 2px, rgba(0, 112, 255, 0.1) 4px 4px;;
}
 
#box1 {
 border: 2px solid #313131;
 animation: fadein  0.2s ease-in forwards;
 } 
 
#box2 {
 border: 2px solid #313131;
 animation: fadein  0.3s ease-in forwards;
 animation-delay: 0.05s;
 } 
 
#box3 {
 border: 2px solid #313131;
 animation: fadein  0.3s ease-in forwards;
 animation-delay: 0.1s;
 }

#box4 {
    border: 2px solid #313131;
    animation: fadein 0.3s ease-in forwards;
    animation-delay: 0.22s;

}
 
.box:hover {
  transform: translate(0%, -0%);
 }

.contain {
    padding: 0px 24px;
    font-size: calc(0.45vw + 0.7rem);
    font-family: verdana;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    line-height: 1.7;
}

@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(13px);
    }

    to {
        opacity: 1;
    }
}