.studio-title {
  text-transform: uppercase;
  font-family: 'rama-gothic-c';
  font-weight: bold;
  margin-bottom: min(6vw, 6vh);
}

.studio-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 85vw;
  margin-inline: 7.5vw;
}

.expertise-card,
.studio-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.studio-card {
  background-color: black;
  border-radius: min(1vw, 1vh);
  overflow: hidden;
}

.expertise-card {
  margin-bottom: max(9vw, 9vh);
}

.studio-img-wrapper {
  position: relative;
  width: 100%;
  height: max(36vh, 36vw);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: min(1vw, 1vh);
  overflow: hidden;
  opacity: 1;
  transition: opacity 200ms ease-in-out;
}

.studio-img {
  scale: 1;
  transition: scale 600ms ease-in-out;
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center;
}

.studio-card:hover .studio-img {
  scale: 1.1;
}

.studio-card:hover .studio-img-wrapper {
  opacity: 0.4;
}

.studio-card:hover .studio-list-wrapper {
  visibility: visible;
}

.expertise-title,
.studio-title {
  flex: 0 0 40%;
  text-transform: uppercase;
  font-family: 'rama-gothic-c';
  font-weight: bold;
  font-size: min(10em, 10vw);
}

.studio-section .expertise-title {
  margin-block: min(9vh, 9vw) min(2vw, 2vh);
}

.expertise-subtitle {
  font-size: min(1.5vw, 1.5vh);
  margin-bottom: 2rem;
}

.studio-list-wrapper,
.expertise-list-wrapper {
  position: absolute;
  top: 0;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  font-size: 140%;
  padding: 0%;
  visibility: hidden;
  list-style: disc;
}

.studio-desc-line,
.expertise-desc-li {
  margin-block: min(0.5vw, 0.5vh);
  width: 100%;
  font-family: 'rama-gothic-c';
  font-weight: bold;
  text-align: center;
  line-height: 100%;
  text-transform: uppercase;
  padding-inline: 10%;
}

.studio-desc-line {
  font-size: min(7rem, 7.6vh, 7.6vw);
}

.expertise-desc-li {
  font-size: min(4.2vh, 2.1vw, 3.8rem);
  margin-block: 1.5rem;
  padding-inline: 5%;
}

.studio-desc-line::before,
.expertise-desc-li::before {
  content: '\2022';
  margin-right: 0.2em;
}

.studio-desc-line::before {
  font-size: 1em;
}

.expertise-pictures-wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.expertise-item {
  position: relative;
  height: max(30vh, 30vw);
  overflow: hidden;
  border-radius: min(1vw, 1vh);
  flex: 0 0 24%;
  background-color: black;
}

.expertise-img-wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
  opacity: 1;
  transition: opacity 400ms ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

.expertise-pictures-wrapper .media-placeholder {
  background-color: var(--black);
  width: 25%;
}

.expertise-img {
  scale: 1;
  transition: scale 600ms ease-in-out;
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center;
}

.expertise-item:hover .expertise-img  {
  scale: 1.1;
}

.expertise-item:hover .expertise-img-wrapper {
  opacity: 0.4;
}

.expertise-item:hover .expertise-list-wrapper {
  visibility: visible;
}

.wp-block-zone56plugin-simple-image {
  position: relative;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: 10%;
  margin-block: 4em;
}

.wp-block-zone56plugin-simple-image .picture-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-height: 50vh;
  overflow: hidden;
  border-radius: 8px;
}

.wp-block-zone56plugin-simple-image .simple-image {
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center;
  transform: scale(1);
  transition: transform 600ms ease-in-out;
}

.wp-block-zone56plugin-simple-image .simple-image:hover {
  transform: scale(1.1);
}

@media (pointer: coarse) {
  .wp-block-zone56plugin-simple-image {
    width: 90%;
    margin-inline: 5%;
  }
  
  @media (orientation: portrait) {
    .studio-title,
    .expertise-title {
      font-size: min(5.5rem, 5.5vh);
    }

    .expertise-subtitle {
      font-size: min(1.3rem, 1.3vh);
    }
    
    .expertise-pictures-wrapper {
      flex-direction: column;
    }
    
    .expertise-item {
      margin-bottom: 1rem;
      flex: 1 1 auto;
    }
    
    .expertise-list-wrapper,
    .studio-list-wrapper {
      visibility: visible;
    }

    .expertise-img-wrapper,
    .studio-img-wrapper {
      opacity: 0.4;
    }
    
    .studio-desc-line,
    .expertise-desc-li {
      font-size: min(3rem, 3vh);
    }
  }
  
  @media (orientation: landscape) {
    .studio-title,
    .expertise-title {
      font-size: min(5.5rem, 5.5vw);
    }

    .expertise-subtitle {
      font-size: min(1.3rem, 1.3vw);
    }
    
    .expertise-list-wrapper,
    .studio-list-wrapper {
      visibility: visible;
      font-size: 100%;
      margin-inline: 0%;
    }
    
    .expertise-img-wrapper,
    .studio-img-wrapper {
      opacity: 0.4;
    }
    
    .studio-desc-line,
    .expertise-desc-li {
      font-size: min(3rem, 3vw);
    }
  }
}