#main.activities {
  grid-template-rows: auto auto 120px auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "cooking-class"
    "activity-grid"
    "terre-di-siena"
    "useful-links";
  grid-gap: 2vw;

  & #cooking-class {
    & #description,
    & p {
      text-align: right;
    }

    & #title img {
      max-width: 40vw;
      opacity: .75;
    }

    & .box figure img {
      width: 35vw;
      margin: 0 1vw 4vw -6vw;
    }
  }

  & #activity-grid {
    width: 80vw;
    margin: 0 auto;
    display: grid;
    grid: auto-flow / repeat(auto-fit, minmax(21vw, 1fr));
    grid-gap: 2vw;

    & article {
      height: 21vw;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      background-size: contain;
      background-repeat: no-repeat;

      & div {
        height: 4vw;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #627141;
        color: white;

        & p {
          text-align: center;
          font-size: 18px;
        }
      }
    }
  }

  & #terre-di-siena {
    display: flex;
    justify-content: center;
    align-items: center;

    & a:any-link {
      border: 1px solid #4b4b4d;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 250px;
      height: 100px;
    }

    & a:is(:hover, :active) {
      border: 2px solid #d8b141;
    }
  }

  & #useful-links {
    position: relative;

    & #links {
      column-count: 2;
      width: 80vw;
      margin: 0 auto 2vw;
      padding: 2vw;
      padding-top: 6vw;
      background: linear-gradient(0deg, #93a28ad4, #93a28ad4), url(/assets/flowers_bg-d410438c3c9c10319082bd11d64df52762931e90fceb1ab4f6bda2eea1f81dc7.jpg) no-repeat;
      background-size: cover;
      box-sizing: border-box;

      & a:any-link {
        text-decoration: none;
        color: white;
        display: block;
        height: 2vw;
        font-size: 18px;
      }

      & a:is(:hover, :active) {
        color: black;
      }
    }

    & h1 {
      text-align: center;
      position: absolute;
      background: #d8b141;
      color: white;
      width: 100%;
      font-variant: petite-caps;
      font-family: "Bodoni Book", serif;
      height: 4vw;
      line-height: 4vw;
      font-size: 2vw;
    }
  }
}

@media screen and (min-width: 1025px) and (max-width: 1450px) {
  #main.activities {
    & #useful-links h1 {
      width: 80vw;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

@media screen and (max-width: 1024px) {
  #main.activities {
    & #cooking-class {
      & div.box {
        width: 90vw;

        & figure img {
          width: 100%;
          margin: -50px auto 2vw;
        }
      }

      & #title img {
        max-width: 100%;
      }
    }

    & #activity-grid {
      width: 96vw;
      display: flex;
      flex-direction: column;

      & article {
        height: 64vw;
        background-size: cover;

        & div {
          height: 12vw;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          & p {
            font-size: 4vw;
          }
        }
      }
    }

    & #useful-links {
      & h1 {
        height: 6vw;
        line-height: 6vw;
        font-size: 4vw;
      }

      & #links {
        column-count: 1;
        width: 96vw;
        padding-top: 10vw;
        text-align: center;

        & a:any-link {
          height: 8vw;
          font-size: 3.75vw;
        }
      }
    }
  }
}