<main class="main" role="main">
	<div class="sidebar">
    <div class="sidebar__content">
      <h1>Sidebar</h1>
      <ul>
        <li>GRID</li>
        <li>SUBGRID</li>
        <li>FLEXBOX</li>
      </ul>
    </div>
	</div>
	<div class="gallery">
    <div class="card">
    <div class="card__image">
      <img src="https://picsum.photos/200" />
    </div>
      <div class="card__content">
        <h3>CSS GRID</h3>
        <p>Una vez hagas este curso, estarás completamente preparado para seguir aprendiendo con los siguientes cursos de la serie de Arquitectura de Software. Todo incluido en el precio de tu suscripción</p>
      </div>
    </div>
     <div class="card">
    <div class="card__image">
      <img src="https://picsum.photos/200" />
    </div>
      <div class="card__content">
        <h3>CSS GRID</h3>
        <p>Una vez hagas este curso, estarás completamente preparado para seguir aprendiendo con los siguientes cursos de la serie de Arquitectura de Software. Todo incluido en el precio de tu suscripción</p>
      </div>
    </div>
     <div class="card">
    <div class="card__image">
      <img src="https://picsum.photos/200" />
    </div>
      <div class="card__content">
        <h3>CSS GRID</h3>
        <p>Una vez hagas este curso, estarás completamente preparado para seguir aprendiendo con los siguientes cursos de la serie de Arquitectura de Software. Todo incluido en el precio de tu suscripción</p>
      </div>
    </div>
     <div class="card">
    <div class="card__image">
      <img src="https://picsum.photos/200" />
    </div>
      <div class="card__content">
        <h3>CSS GRID</h3>
        <p>Una vez hagas este curso, estarás completamente preparado para seguir aprendiendo con los siguientes cursos de la serie de Arquitectura de Software. Todo incluido en el precio de tu suscripción</p>
      </div>
    </div>
     <div class="card">
    <div class="card__image">
      <img src="https://picsum.photos/200" />
    </div>
      <div class="card__content">
        <h3>CSS GRID</h3>
        <p>Una vez hagas este curso, estarás completamente preparado para seguir aprendiendo con los siguientes cursos de la serie de Arquitectura de Software. Todo incluido en el precio de tu suscripción</p>
      </div>
    </div>
     <div class="card">
    <div class="card__image">
      <img src="https://picsum.photos/200" />
    </div>
      <div class="card__content">
        <h3>CSS GRID</h3>
        <p>Una vez hagas este curso, estarás completamente preparado para seguir aprendiendo con los siguientes cursos de la serie de Arquitectura de Software. Todo incluido en el precio de tu suscripción</p>
      </div>
    </div>
	</div>
</main>

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: arial;
  font-size: 18px;
}
li {
  list-style: none;
}

.main {
  width: 90%;
  height: max-content;
  margin: 1em auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "sidebar sidebar sidebar" "gallery gallery gallery";
  gap: 1em;
  @media screen and (min-width: 1024px) {
    grid-template-areas: "gallery gallery sidebar";
  }
  .sidebar {
    height: max-content;
    grid-area: sidebar;
    padding: 1.5em 1em;
    border: 1px solid grey;
    border-radius: 5px;

    &__content {
      h1 {
        margin-bottom: 0.5em;
      }
      li {
        margin-bottom: 0.5em;
      }
    }
  }
  .gallery {
    display: grid;
    grid-area: gallery;
    grid-template-columns: repeat(1, 1fr);
    gap: 1em;

    @media screen and (min-width: 640px) {
      grid-template-columns: repeat(2, 1fr);
    }
    @media screen and (min-width: 1280px) {
      grid-template-columns: repeat(3, 1fr);
    }

    .card {
      height: max-content;
      background-color: grey;

      &__image {
        width: 100%;
        height: 300px;

        & > img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        }
      }

      &__content {
        padding: 2em 1em;

        h3 {
          font-size: 2em;
          margin-bottom: 0.3em;
        }
        p {
          line-height: 1.5em;
          text-align: justify;
        }
      }
    }
  }
}