@import url('../../css/styles.css');

/* MOBILE (default) */
.about-image{
  grid-column: 2 / span 6;
  aspect-ratio: 0.8/1 ;
}


.about-text {
  grid-column: span 8;
}

.about-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  justify-content: center;
}

.likes,
.dislikes {
  display: flex;
  flex-direction: column;
}

.likes ul,
.dislikes ul {
  list-style: disc;
  padding-left: var(--space-lg);
}

.likes li,
.dislikes li {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.likes li:first-child,
.dislikes li:first-child {
  margin-top: var(--space-sm);
}

.resume-line a {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color ease-in-out 200ms;
}

.resume-line a:hover {
  color: var(--pink);
}

/* TABLET */
@media only screen and (min-width: 768px) {
  .about-image {
    grid-column: 7 / span 5;
    grid-row: 1;
    aspect-ratio: 4 / 5;
  }

  .about-text {
    grid-column: 2 / span 4;
    grid-row: 1;
    margin-top: 0;
  }
}