* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  padding: 10px;
}

.card {
  height: 100%;
  position: relative;
  flex: 0.5;
  display: flex;
  text-align: center;
  flex-direction: column;
  background-position: center;
  transition: flex 2s ease-out;
}

.card p {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s ease;
}

.card p:first-child {
  transform: translateY(-100%);
}

.card p:last-child {
  transform: translateY(100%);
}

.active {
  flex: 5;
}

.active p:first-child {
  transform: translateY(0);
}

.active p:last-child {
  transform: translateY(0);
}

p {
  text-transform: uppercase;
  color: white;
  font-size: clamp(30px, 3vw, 50px);
  font-family: "Anton", sans-serif;
}
.card-mountain {
  background-image: url("https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2474&q=80");
}
.card-woods {
  background-image: url("https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80");
}
.card-sunset {
  background-image: url("https://images.unsplash.com/photo-1586348943529-beaae6c28db9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1315&q=80");
}
.card-tree {
  background-image: url("https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80");
}
.card-beach {
  background-image: url("https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80");
}
.card-mountain,
.card-woods {
  display: none;
}
@media screen and (min-width: 768px) {
  .card-mountain,
  .card-woods {
    display: FLEX;
  }
}