section.card {
  background:#f6f6f6;
  border-radius:24px 24px 24px 48px;
  padding:48px 48px 48px 308px;
  margin:84px 0;
  width:60vw;
  max-width:920px;
  min-width:640px;
  display:flex;
  flex-direction:row;
  align-self:flex-start;
  position:relative;
  border:3px groove #f7ca40;
  box-shadow:
    5px 0 0 0 fade(#ccc,30%),
    -5px 0 0 0 fade(#ccc,30%),
    0 5px 0 0 fade(#ccc,30%);
  .text-content {
    display:flex;
    flex-direction:column;
    width:calc(60vw - 192px);
    h3 {
      margin:0;
      font-size:1.5em;
      color: brown;
      max-width:20ch;
    }
    p {
      margin:16px 0 24px;
      max-width:36ch;
      font-size: 14px;
      color: #042b02;
    }
    a {
      color: brown;
      align-self:flex-start;
      text-decoration:none;
      padding:6px 12px;
      border-radius:12px;
      border:2px groove gray;
      transition:400ms all;
      &:hover {

        background: lightgray;
        color:white;
      }
    }
  }
  .visual {
    width:240px;
    height:100%;
    position:absolute;
    top:-24px;
    left:24px;
    overflow:hidden;
    border-radius:24px;
    border:2px groove #a7fcf4;
    box-shadow:
      1px 2px 6px fade(white,25%),
      2px 6px 12px fade(black,25%);
    img {
      height:100%;
    }
  }
  &:nth-of-type(odd) {
    margin:0 0 0 248px;
    border-radius:24px 24px 48px 24px;
    padding:48px 308px 48px 60px;
    .visual {
      right:24px;
      left:auto
    }
    .text-content a {
      align-self:flex-start
    }
  }

}

article {
  margin:auto;
  display:block;
  width:calc(60vw + 248px);
  max-width:calc(920px + 248px);
  min-width:calc(640px + 248px);
}



@media all and (max-width:1100px) {

  article {
    width:100%;
    max-width:100%;
    min-width:100%
  }
  section.card {
    width:100%;
    max-width:100%;
    min-width:100%;
    .text-content {
      width:100%
    }
    &:nth-of-type(odd) {
      margin:0
    }
  }
}
@media all and (max-width:720px) {

  section.card {
    margin:64px 0;
    padding:88px 36px 36px;
    flex-direction:column;
    border-radius:24px;
    &:nth-of-type(odd) {
      padding:88px 36px 36px;
      border-radius:24px;
    }
    .text-content {
      h3 {
        max-width:calc(100% - 150px);
        font-size:1em
      }
      p,a {
        font-size:0.8em
      }
    }
    .visual,
    &:nth-of-type(odd) .visual {
      width:150px;
      height:150px;
      right:16px;left:auto;
      img {
        width:100%;
        height:100%;
      }
    }
  }
}