<header>
  <label>Direction of box elements</label>
  <select id="writing-mode">
    <option value="ltr" selected>Left to right</option>
    <option value="rtl">Right to left</option>
  </select>
</header>
<main>
  <article class="box">
    <img class="img" src='https://images.unsplash.com/photo-1512229146678-994d3f1e31bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMjgxMjg5MQ&ixlib=rb-1.2.1&q=80&w=800' width="800" height="450" alt=''>
    <h2 class="title"><a href="#0" aria-label="Learn more Very Distant Mountains">Very Distant Mountains</a></h2>
    <p class="tagline">Camp out at the summit for the sunset</p>
    <div class="tag">Mountains</div>
    <div class="actions">
      <button class="btn" title="Save as favorite">
        <svg data-icon="heart" viewBox="0 0 512 512">
          <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" />
        </svg>
      </button>
      <button class="btn" title="Share this trip">
        <svg data-icon="share" viewBox="0 0 512 512">
          <path d="M503.691 189.836L327.687 37.851C312.281 24.546 288 35.347 288 56.015v80.053C127.371 137.907 0 170.1 0 322.326c0 61.441 39.581 122.309 83.333 154.132 13.653 9.931 33.111-2.533 28.077-18.631C66.066 312.814 132.917 274.316 288 272.085V360c0 20.7 24.3 31.453 39.687 18.164l176.004-152c11.071-9.562 11.086-26.753 0-36.328z" />
        </svg>
      </button>
    </div>
  </article>

  <article class="box" style="--bg-color: deepskyblue;">
    <img class="img" src='https://images.unsplash.com/photo-1515404929826-76fff9fef6fe?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMjgxNDA3MQ&ixlib=rb-1.2.1&q=80&w=800' width="800" height="450" alt=''>
    <h2 class="title"><a href="#0" aria-label="Learn more Sunset Beach">Sunset Beach</a></h2>
    <p class="tagline">Dip your toes in the ocean</p>
    <div class="tag">Beach</div>
    <div class="actions">
      <button class="btn" title="Save as favorite">
        <svg data-icon="heart" viewBox="0 0 512 512">
          <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" />
        </svg>
      </button>
      <button class="btn" title="Share this trip">
        <svg data-icon="share" viewBox="0 0 512 512">
          <path d="M503.691 189.836L327.687 37.851C312.281 24.546 288 35.347 288 56.015v80.053C127.371 137.907 0 170.1 0 322.326c0 61.441 39.581 122.309 83.333 154.132 13.653 9.931 33.111-2.533 28.077-18.631C66.066 312.814 132.917 274.316 288 272.085V360c0 20.7 24.3 31.453 39.687 18.164l176.004-152c11.071-9.562 11.086-26.753 0-36.328z" />
        </svg>
      </button>
    </div>
  </article>

  <article class="box" style="--bg-color: darkgray;">
    <img class="img" src='https://images.unsplash.com/photo-1545153943-f4ded7fab6a3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMjgxNzgwOQ&ixlib=rb-1.2.1&q=80&w=800' width="800" height="450" alt=''>
    <h2 class="title"><a href="#0" aria-label="Learn more about Skyline City">Skyline City</a></h2>
    <p class="tagline">Helicopter rides and free sandwiches with all the trimmings</p>
    <div class="tag">Metro</div>
    <div class="actions">
      <button class="btn" title="Save as favorite">
        <svg data-icon="heart" viewBox="0 0 512 512">
          <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" />
        </svg>
      </button>
      <button class="btn" title="Share this trip">
        <svg data-icon="share" viewBox="0 0 512 512">
          <path d="M503.691 189.836L327.687 37.851C312.281 24.546 288 35.347 288 56.015v80.053C127.371 137.907 0 170.1 0 322.326c0 61.441 39.581 122.309 83.333 154.132 13.653 9.931 33.111-2.533 28.077-18.631C66.066 312.814 132.917 274.316 288 272.085V360c0 20.7 24.3 31.453 39.687 18.164l176.004-152c11.071-9.562 11.086-26.753 0-36.328z" />
        </svg>
      </button>
    </div>
  </article>

  <article class="box" style="--bg-color: darkseagreen;">
    <img class="img" src='https://images.unsplash.com/photo-1516687599977-c044113ccdde?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMjgxODA2Ng&ixlib=rb-1.2.1&q=80&w=800' width="800" height="450" alt=''>
    <h2 class="title"><a href="#0" aria-label="Learn more about Venice 2 Meet U">Venice 2 Meet U</a></h2>
    <p class="tagline">Canal excursions abounds</p>
    <div class="tag">Lifestyle</div>
    <div class="actions">
      <button class="btn" title="Save as favorite">
        <svg data-icon="heart" viewBox="0 0 512 512">
          <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" />
        </svg>
      </button>
      <button class="btn" title="Share this trip">
        <svg data-icon="share" viewBox="0 0 512 512">
          <path d="M503.691 189.836L327.687 37.851C312.281 24.546 288 35.347 288 56.015v80.053C127.371 137.907 0 170.1 0 322.326c0 61.441 39.581 122.309 83.333 154.132 13.653 9.931 33.111-2.533 28.077-18.631C66.066 312.814 132.917 274.316 288 272.085V360c0 20.7 24.3 31.453 39.687 18.164l176.004-152c11.071-9.562 11.086-26.753 0-36.328z" />
        </svg>
      </button>
    </div>
  </article>
</main>

@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,700;1,300&display=swap");

:root {
  --font-primary: "Helvetica", sans-serif;
  --font-secondary: "Merriweather", serif;
  --space: 0.5rem;
  --space-sm: calc(var(--space) / 2);
  --space-lg: calc(var(--space) * 4);
}

/* Grid properties */
.box {
  display: grid;
  grid-template:
    [box-start] "tagline actions" [box-end] /
    [box-start] 1fr auto [box-end];
}

.box > *,
.box::before {
  grid-area: box;
}

.tag {
  place-self: start;
}

.title {
  place-self: center;
}

.tagline {
  grid-area: tagline;
  place-self: end start;
}

.actions {
  grid-area: actions;
  place-self: end;
}

/* Box styles */
.box {
  --color: white;
  --bg-color: crimson;

  direction: var(--direction, ltr);
  position: relative;
  overflow: hidden;
  padding: var(--space-sm);
  color: var(--color, white);
  border: 4px solid var(--bg-color, crimson);
}

.box::before {
  content: "";
  position: relative;
  background: black;
  opacity: 0.4;
  z-index: -1;
  transition: opacity 200ms ease-out;
}

.box img {
  position: relative;
  inline-size: 100%;
  height: auto;
  z-index: -2;
}

.tag {
  padding: var(--space);
  color: var(--color);
  font-size: 0.75rem;
  letter-spacing: 0.05rem;
  background-color: var(--bg-color);
}

.title {
  padding: var(--space);
  font-size: 1.5rem;
  font-family: var(--font-secondary);
  line-height: 1.2;
  text-align: center;
  user-select: none;
}

.title a {
  color: inherit;
  text-decoration: none;
}

.title a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.tagline {
  padding: var(--space-sm) var(--space);
  font-family: var(--font-secondary);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.2;
  user-select: none;
}

.actions {
  position: relative;
  display: flex;
  padding: var(--space-sm);
  gap: var(--space-sm);
}

.btn {
  display: flex;
  cursor: pointer;
  padding: var(--space);
  font-size: inherit;
  font-family: inherit;
  color: var(--color);
  background-color: var(--bg-color);
  border: none;
}

.btn:hover {
  filter: contrast(80%);
}

.btn:active {
  transform: translateY(1px);
}

[data-icon] {
  inline-size: 1em;
  fill: currentcolor;
}

/* Transitions */
.box {
  transition: border-color 200ms ease;
}

.box:hover {
  border-color: transparent;
}

.box .tagline {
  opacity: 0;
}

.box .title,
.box .tagline,
.box::before {
  transition: opacity 200ms ease;
}

.box:hover .title,
.box:hover .tagline,
.box:hover::before {
  opacity: 0;
}

.box:hover .tagline {
  opacity: 1;
}

.img {
  transition: transform 200ms ease-out;
}

.box:hover .img {
  transform: scale(1.05);
}

/* Other styles */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font-primary);
  padding: calc(var(--space) * 2);
  margin-block-start: var(--space-lg);
  margin-block-end: var(--space-lg);
  margin-inline-start: auto;
  margin-inline-end: auto;
  max-inline-size: 1000px;
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space);
  margin-block-end: 2rem;
  inline-size: 100%;
  text-align: center;
}

select {
  font-size: inherit;
}

main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  grid-gap: calc(var(--space) * 2);
  padding-block-end: var(--space-lg);
  inline-size: 100%;
}

const selectWritingMode = document.getElementById("writing-mode");

selectWritingMode.addEventListener("change", () => {
  document.documentElement.style.setProperty(
    "--direction",
    selectWritingMode.value
  );
});