@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Source+Sans+Pro:wght@300;400;600&display=swap");
    
    body {
      margin: 0;
      padding: 0;
      font-family: 'Source Sans Pro', sans-serif;
    }

    .wrapper {
      max-width: 1700px;
      width: 85%;
      margin: 0 auto;
      background-color: #A8D4AD;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.267);
    }

    h1 {
      text-align: left;
      padding: 0;
      font-size: 33px;
      font-family: 'Playfair Display', serif;
      font-style: italic;
      margin-left: 12px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.329);
    }

    .container {
      overflow: hidden;
    }

    .column {
      float: left;
      background-color: #92B9BD;
      margin: 10px;
      padding: 23px;
      box-sizing: border-box;
      height: auto;
      text-align: center;
      font-size: 24px;
      overflow: auto;
      min-height: 100px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.377);
    }

    .boldText {
      font-weight: bold;
    }

    img {
      max-width: 100%;
      height: auto;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.452); 
    }

    @media screen and (min-width: 1201px) {
      .column {
        width: calc(20% - 20px);
      }
    }

    @media screen and (max-width: 1200px) and (min-width: 901px) {
      .column {
        width: calc(33% - 20px);
      }
    }

    @media screen and (max-width: 900px) and (min-width: 601px) {
      .column {
        width: calc(50% - 20px);
      }
    }

    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
        background-color: #C4E0F9;
      }
    }