#four-items-area {
  display: grid;
  justify-content: space-evenly;
  width: 100%;
  grid-template-columns: 50% 50%;
  text-transform: uppercase;
}
#four-items-area .image {
  grid-column: 1 / span 2;
  height: 50vw;
}
#four-items-area .items {
  position: relative;
  width: 100%;
  height: 50vw;
}
#four-items-area .items > div {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
#four-items-area .items > div h3 {
  padding-left: var(--padding-margin-3);
  padding-right: var(--padding-margin-3);
}
#four-items-area .items > div p {
  padding-left: var(--padding-margin-3);
  padding-right: var(--padding-margin-3);
  margin-top: var(--padding-margin-4);
}
#four-items-area .items:nth-child(2),
#four-items-area .items:nth-child(5) {
  box-shadow: 0px 0px 10px RGBA(235, 209, 151, 0.5);
}





@media (min-width: 576px) {
  #four-items-area {
    grid-template-columns: 25% 25% 25% 25%;
  }
  #four-items-area .image {
    grid-column: 1 / span 4;
  }
  #four-items-area .items {
    height: 25vw;
  }
  #four-items-area .items h3 {
    font-size: 1.25rem;
  }
  #four-items-area .items:nth-child(5) {
    box-shadow: none;
  }
  #four-items-area .items:nth-child(2),
  #four-items-area .items:nth-child(4) {
    box-shadow: 0px 0px 10px RGBA(235, 209, 151, 0.5);
  }
}





@media (min-width: 768px) {
  #four-items-area .items h3 {
    font-size: 1.75rem;
  }
}





@media (min-width: 992px) {
  #four-items-area {
    grid-template-columns: 66.66% 16.67% 16.67%;
  }
  #four-items-area .image {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 33.34vw;
  }
  #four-items-area .items {
    height: 16.67vw;
  }
  #four-items-area .items h3 {
    font-size: 1.5rem;
  }
  #four-items-area .items:nth-child(4) {
    box-shadow: none;
  }
  #four-items-area .items:nth-child(2),
  #four-items-area .items:nth-child(5) {
    box-shadow: 0px 0px 10px RGBA(235, 209, 151, 0.5);
  }
}





@media (min-width: 1200px) {
  #four-items-area .items h3 {
    font-size: 1.75rem;
  }
}





@media (min-width: 1600px) {
  #four-items-area .items h3 {
    font-size: 2rem;
  }
}