/* BASIC */

section {
  margin-block: 75px 25px;
}


/* 
  COVER
*/

.cover .logo {
  width: 175px;
}

@media screen and (min-width: 1200px) {
  .cover .logo {
    width: 250px;
  }
}

.cover h1 {
  font-size: var(--fs-l);
  font-weight: 600;
  color: var(--text-300);
  line-height: 1.4;
}

.cover-image-container {
  width: 100%;
  height: 500px;
  overflow: hidden;
  border-radius: 15px;
}

.cover-image-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* 
  QUOTES
*/

.quotes {
  margin-top: 0px;
  overflow: hidden;
}

.row {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 1024px) {
  .row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 50px;
  }
}

#wsi-diagram {
  align-self: center;
}

.quote {
  position: relative;
  font-size: var(--fs-m);
  margin-block: 50px;

  display: flex;
  flex-direction: column;
  align-items: center;

  max-width: 750px;
}

.quote.right {
  align-self: flex-end;
  text-align: right;
}

.quote.left img, 
.quote.right img {
  position: absolute;
}

.quote.left img {
  top: -25px;
  left: 0;
}

.quote.right img {
  bottom: -25px;
  right: 0;
}

.quote p {
  line-height: var(--font-height);
}

.quote.reverse {
  display: grid;
  flex-direction: column;
}

#wsi-diagram {
  max-width: 100%;
  margin-bottom: 50px;
}

/* 
  FACTS
*/

h2 {
  font-weight: 500;
  font-size: var(--fs-xl);
  text-align: center;
  margin-inline: auto;
  max-width: 400px;
}

h2.margin {
  margin-block: 100px;
}

.grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 100px;
  max-width: 1200px;
  margin: auto;
}

.column {
  text-align: center;
  font-size: var(--fs-m);
  line-height: var(--font-height);
}

.facts .column img {
  max-width: 150px;
}

.column p {
  max-width: 250px;
}

/* 
  PORTFOLIO
*/

.heading-text {
  font-size: var(--fs-m);
  line-height: var(--font-height);
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
}

.portfolio .grid {
  margin-block: 50px;
  gap: 25px;
}

.portfolio .column {
  background-color: #FFF7E3;
  overflow: hidden;
  border-radius: 25px;
  width: 100%;
  height: 160px;
  max-width: 400px;
  
  color: var(--text-400);
  text-decoration: none;

  position: relative;
}

.portfolio .column span {
  position: absolute;
  left: 25px;
  top: 25px;
  font-weight: 600;
  font-size: var(--fs-l);
  color: var(--text-300);
}

.portfolio .column img {
  position: absolute;
  left: -75px;
  bottom: -75px;

  transition: .3s;
}

.portfolio .column img:nth-child(1) {
  width: 200px;
  transition-delay: .1s;
}

.portfolio .column img:nth-child(2) {
  width: 170px;
  transition-delay: .05s;
}

.portfolio .column img:nth-child(3) {
  width: 140px;
}

.portfolio .column:hover img {
  transform: scale(1.3);
}


/* 
  KONTAKT
*/

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-block: 50px;
}

.contact-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

.contact-link a {
  text-decoration: none;
  color: var(--text-400);
  font-size: var(--fs-m);
}

/* Extra small
<576px	
Small
≥576px	
Medium
≥768px	
Large
≥992px	
Extra large
≥1200px */

/* Small >= 576px */

@media screen and (min-width: 576px) {
  .column p {
    max-width: 400px;
  }
}

@media screen and (min-width: 1224px) {
  .grid {
    flex-direction: row;
    align-items: start;
  }
}