<div class="container">

  <section id="benefits">

    <div class="even-columns">

      <div class="col">
        <h3>Lorem, ipsum dolor.</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione fugiat atque libero, unde consequuntur aspernatur?</p>
      </div>
      <div class="card">
        <h3>Lorem, ipsum dolor.</h3>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="col">
        <h3>Nemo, odit minus?</h3>
        <p>Excepturi ipsa quasi ut quo illo in velit architecto alias, deserunt facilis corrupti, earum tempora?</p>
      </div>

    </div>
  </section>

</div>

.even-columns {
  display: flex;
  gap: 1em;
}

.even-columns > * {
  flex: 1;
}

.card {
  padding: 2em;
  background: var(--clr-gradient);
  color: white;
  border-radius: 0.25rem;
}

/* added to help visualize the widths */
.even-columns > *:nth-child(2n + 1) {
  outline: 1px solid blue;
}

/* =========================
   GENERAL STYLES 
   NOT RELATED TO THE TUTORIAL
============================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --clr-primary: #ee6352;
  --clr-secondary: #d16e8d;
  --clr-accent: #f7f7ff;
  --clr-gradient: linear-gradient(
    -90deg,
    var(--clr-primary),
    var(--clr-secondary)
  );
  --ff-title: bungee, sans-serif;
  --ff-body: canada-type-gibson, sans-serif;
  --fw-body: 300;
  --fw-bold: 800;
  --fw-title: 400;
  --fw-number: 800;
}

body {
  padding: 2rem;
  min-height: 100vh;
  font-family: var(--ff-body);
  font-weight: var(--fw-body);
  font-size: 1.25rem;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
}

a:hover,
a:focus {
  color: var(--clr-accent);
}

:focus {
  outline: 5px solid var(--clr-accent);
  outline-offset: 3px;
}

.container {
  width: min(95%, 45rem);
  margin: 0 auto;
}