@charset "utf-8";

main > #materials { background: rgb(24, 20, 22); border: 1px solid rgb(75, 43, 59); border-radius: 32px; padding: 58px 0px; overflow: clip; }

.material-finale { grid-template-columns: 1.15fr 1fr; gap: 50px; background: none; }

.material-copy h2 { font-family: Eesti, sans-serif; font-weight: 500; font-size: clamp(37px, 3.6vw, 53px); line-height: 1.1; letter-spacing: -0.025em; }

.material-intro { color: rgb(200, 184, 193); font-size: 19px; max-width: 470px; margin-top: 20px; }

.resource-list { list-style: none; padding: 0px !important; margin: 30px 0px !important; }

.resource-list li { display: flex; gap: 20px; align-items: center; border-top: 1px solid rgb(82, 50, 63); padding: 20px 0px; margin: 0px !important; }

.resource-list li:last-child { border-bottom: 1px solid rgb(82, 50, 63); }

.resource-list .icon { width: 29px; height: 29px; color: rgb(255, 118, 173); flex: 0 0 auto; }

.resource-list h3 { font-size: 22px; font-weight: 500; color: rgb(255, 255, 255); }

.resource-list p { font-size: 18px; color: rgb(195, 173, 186); margin-top: 5px; line-height: 1.4; }

.material-copy .btn { background: rgb(224, 0, 91); color: white; min-height: 56px; padding: 17px 30px; width: auto; }

.material-copy .btn:hover { background: rgb(191, 0, 76); }

.guide-visual { height: 510px; background: none; border-radius: 0px; max-width: none; min-height: 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }

.guide-visual img { width: 100%; height: 430px; max-height: 430px; object-fit: contain; }

.guide-caption { font-size: 18px; color: rgb(225, 196, 210); text-align: center; line-height: 1.4; }

.materials .resource-list { font-size: inherit; }

@media (max-width: 1000px) {
  .material-finale { gap: 30px; }
  .guide-visual { height: 440px; }
  .guide-visual img { height: 360px; max-height: 360px; }
  .resource-list h3 { font-size: 20px; }
  .resource-list p { font-size: 18px; }
}

@media (max-width: 760px) {
  main > #materials { border-radius: 24px; padding: 35px 0px; }
  .material-finale { grid-template-columns: 1fr; gap: 25px; }
  .material-copy h2 { font-size: 35px; }
  .material-intro { font-size: 18px; margin-top: 17px; }
  .resource-list { margin: 25px 0px !important; }
  .resource-list li { gap: 15px; padding: 17px 0px; }
  .resource-list h3 { font-size: 20px; }
  .resource-list p { font-size: 18px; }
  .resource-list .icon { width: 26px; height: 26px; }
  .material-copy .btn { width: 100%; padding: 16px 15px; font-size: 18px; }
  .guide-visual { height: 330px; max-width: 310px; margin: auto; width: 100%; }
  .guide-visual img { height: 270px; max-height: 270px; }
  .guide-caption { font-size: 18px; }
}

@media (max-width: 360px) {
  .material-copy h2 { font-size: 30px; }
  .resource-list h3 { font-size: 18px; }
  .resource-list p { font-size: 18px; }
  .resource-list li { gap: 13px; }
  .guide-visual { height: 295px; }
  .guide-visual img { height: 240px; max-height: 240px; }
}