/* #### ABOUT ################################################################################### */

.about img {
  margin-top: calc(var(--border-radius-default) * 2);
  margin-right: calc(var(--border-radius-default) * 4);
  box-shadow: var(--low-shadow);
  border-radius: var(--border-radius-default);
  width: 25%;
  min-width: 150px;
  object-fit: cover;
  object-position: center;
}

.about img:first-of-type {
  margin-top: 0;
}
.about img:last-of-type {
  margin-bottom: 0;
}

.about img[style*='float:left'] {
  margin-left: 0;
}
.about img[style*='float:right'] {
  margin-right: 0;
}

.about p {
  --font-size-p: var(--block-20);
  margin-right: calc(var(--border-radius-default) * 2);
  margin-left: calc(var(--border-radius-default) * 2);
  font-weight: 100;
  font-size: var(--font-size-p);
  line-height: var(--line-height-large);
  font-family: var(--font-1);
  text-align: justify;
  text-indent: calc(var(--font-size-p) * 1.5);
}

.about p:not(:last-of-type) {
  margin-bottom: var(--padding-large);
}

.about p.my-name-is {
  rotate: -2deg;
  margin-bottom: var(--padding-mid);
  color: var(--shade-4);
  font-size: var(--block-48);
  line-height: var(--line-height-default);
  font-family: var(--font-3);
  text-align: center;
  text-indent: unset;
}

.about p.thank-you {
  rotate: -2deg;
  margin: var(--padding-large) var(--padding-large) 0 0;
  color: var(--shade-4);
  font-size: var(--block-80);
  font-family: var(--font-3);
  text-align: right;
  text-indent: unset;
}

/* ################################################################################################ */
/* ################################################################################################ */
/* ################################################################################################ */

@media screen and (max-width: 608px) {
  .about p {
    font-size: var(--block-20);
  }

  .about p.my-name-is {
    clear: both;
    margin: var(--block-32) var(--block-8) var(--block-8) 0;
    font-size: var(--block-80);
  }

  .about p.thank-you {
    margin: var(--block-32) var(--block-8) var(--block-8) 0;
    font-size: var(--block-80);
  }

  .about img {
    margin: var(--block-8) 0;
    box-shadow: var(--low-shadow);
    width: 100%;
  }

  .about img:first-of-type {
    margin-top: 0;
  }
  .about img:last-of-type {
    margin-bottom: var(--block-32);
  }
}