header {
  width: 100%;
  height: 60vh;
  overflow: hidden;
  position: relative;
}

header .bg {
  width: 100%;
  height: 100%;
  background-image: url("/images/header1.jpeg");
  background-position: 50% 20%;
  background-size: cover;
}

header .card {
  position: absolute;
  right: 5rem;
  top: 50%;
  transform: translateY(-50%)
}

.post .two_columns .right {
  height: 100%;
  margin-bottom: 0;
}

.cards {
  padding: 1rem 0 3rem 0;
  white-space: nowrap;
  transition: transform 100ms ease-in-out;
  overflow: hidden;
  margin: 0 -1rem;
}

.cards .inner {
  width: max-content;
}

.cards .card {
  display: inline-block;
  margin: 0 1rem;
  width: 15rem;
  height: 22.5rem;
  box-shadow: 0.3rem 0.3rem 0 0 #FFF0F0 , -0.3rem -0.3rem 0 0 #FFF0F0;
  border: 0.7rem solid #fff;
}

.cards .card img {
  width: 100%;
  height: 66.67%;
  object-fit: cover;
  object-position: center;
}

.cards .card .bottom {
  height: 33.33%;
  position: relative;
}

.cards .card p {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  width: 100%;
  white-space: pre-line;
  color: #000;
}

@media (min-width: 1200px) {
  header .card {
    right: calc(50vw - 500px);
  }
}

@media (max-width: 700px) {
  header .bg {
    background-image: url("/images/header1-portrait.jpeg");
  }

  header .card {
    width: 80%;
    right: 10%;
    bottom: 3rem;
    transform: none;
  }
}