@font-face {
  font-family: "Open Sans";
  font-display: swap;
  font-weight: 400;
  src: local ("Open Sans"),
    url(../fonts/OpenSans-VariableFont.ttf) format("truetype"),
    url(../fonts/OpenSans-VariableFont.otf) format("opentype"),
    url(../fonts/OpenSans-VariableFont.svg) format("svg");
}

@font-face {
  font-family: "Handlee";
  font-display: swap;
  font-weight: 400;
  src: local ("Handlee"), local ("Handlee-Regular"),
    url(../fonts/Handlee-Regular.ttf) format("truetype"),
    url(../fonts/Handlee-Regular.otf) format("opentype"),
    url(../fonts/Handlee-Regular.svg) format("svg");
}

body {
  color: #333231;
  font-family: "Open Sans", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100dvh;
  margin: 0px;
  font-size: 14px;

  p{
    text-wrap-style: balance;
  }

  a {
    color: #d73b4f;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
    &.white {
      color: #fff;
    }
  }

  h3 {
    font-size: 26px;
    color: #d73b4f;
    margin-bottom: 30px;
    font-family: "Handlee", Calibri, cursive;
    letter-spacing: 5px;
  }
  h4 {
    font-family: "Handlee", Calibri, cursive;
    font-size: 18px;
    color: #d73b4f;
    text-transform: uppercase;
    letter-spacing: 3px;
  }

  #header {
    min-height: 100px;
    display: flex;
    align-items: center;
    padding: 0 40px;
    justify-content: space-between;
  }
  #main {
    display: flex;
    justify-content: center;
    flex-direction: column;
    .imagewall {
      display: grid;
      width: calc(100% - 90px);
      grid-template-columns: repeat(20, 1fr);
      grid-template-rows: repeat(13, 1fr);
      max-width: 100%;
      overflow: hidden;
      aspect-ratio: 2 / 1.1;
      gap: 5px;
      padding: 5px;
      background-color: #f5efea;
      margin: 40px;
      border-radius: 10px;
      div {
        background-size: cover;
        border-radius: 10px;
        background-position: center;
        corner-shape: squircle;
        &:nth-child(1) {
          grid-area: 7 / 11 / span 4 / span 10;
          background-image: url(https://www.yogapyourlife.de/images/Retreat_logo.svg);
          background-size: 72%;
          background-repeat: no-repeat;
        }
        &:nth-child(2) {
          grid-area: 1 / 1 / 9 / 6;
          background-image: url(/media/retreat_gardasee_2027/csm_481238_ce9c6f66b0.jpg);
        }
        &:nth-child(3) {
          grid-area: 1 / 6 / span 3 / span 5;
          background-image: url(/media/retreat_gardasee_2027/csm_481239_28e01f8516.jpg);
        }
        &:nth-child(4) {
          grid-area: 9 / 1 / span 5 / span 10;
          background-image: url(/media/retreat_gardasee_2027/csm_481248_664d91332d.jpg);
          background-image: url(/media/retreat_gardasee_2027/csm_481245_5595e52222.jpg);
        }
        &:nth-child(5) {
          grid-area: 4 / 6 / span 5 / span 5;
          background-image: url(/media/retreat_gardasee_2027/csm_481250_a4d129dcb5.jpg);
          background-image:url(/media/retreat_gardasee_2027/csm_481240_91c71432f6.jpg);
        }
        &:nth-child(6) {
          grid-area: 1 / 11 / span 6 / span 10;
          background-image: url(/media/retreat_gardasee_2027/csm_481256_401002ed4d.jpg);
        }
        &:nth-child(7) {
          grid-area: 11 / 11 / span 3 / span 10;
          background-image: url(/media/retreat_gardasee_2027/csm_481237_a9f8b69d71.jpg);
        }
      }
    }
    .content {
      padding: 40px;
      text-align: center;
      max-width: 800px;
      margin: 0 auto;
      img {
        width: 50%;

        border: 5px solid #f4efea;
        border-radius: 15px;
        &.left {
          float: left;
          margin: 10px 30px 10px -30px;
          transform: rotate(-2deg);
        }
        &.right {
          float: right;
          margin: 10px -30px 10px 30px;
          transform: rotate(2deg);
        }
      }
      .space {
        height: 50px;
      }
    }
    .two-columns {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(300px, 47%), 1fr));
      gap: 40px;
      align-items: center;
      padding: 40px;
      max-width: 800px;
      margin: 0 auto;
      text-align:center;
      img {
        max-width: 100%;
        border: 5px solid #f4efea;
        border-radius: 15px;
      }
    }
  }
  .space {
    flex-grow: 1;
  }
  #footer {
    background-color: #d73b4f;
    min-height: 100px;
    display: flex;
    align-items: center;
    color: #fff;
    gap: 15px;
    padding: 0 40px;
    justify-content: flex-end;
  }
}