.two-col-component {
  display: flex;
  flex-direction: column-reverse;
  padding-top: 40px;
  padding-bottom: 40px;
  gap: 48px;

  @media (min-width: 1024px) {
    padding-top: 80px;
    padding-bottom: 90px;
    gap: 60px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  @media (min-width: 1280px) {
    gap: 80px;
  }

  & .two-col-component__column {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;

    @media (min-width: 1024px) {
      width: 50%;
      align-items: start;
      justify-content: start;
    }

    & figure {
      width: 100%;
      height: 335px;
      display: block;
      border-radius: 8px;
      border: 2px solid var(--wp--preset--color--tan, #c8af7b);
      overflow: hidden;

      @media (min-width: 640px) {
        height: 400px;
      }

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