/* Figma 104:1057 / 452:3927 / 468:842 / 489:898. */
.materials {--materials-gutter:var(--gutter);background:var(--sand);display:flex;align-items:center;justify-content:space-between;gap:23px;padding:60px var(--materials-gutter);overflow:hidden}
.materials-copy {display:flex;flex-direction:column;gap:24px;flex:0 1 620px;min-width:0}
.materials-copy h2 {font-size:38px;line-height:1.15}
.materials-copy p {font-size:16px;line-height:1.27}
.materials-copy .button {margin-top:27px}
.materials-carousel {display:flex;flex-direction:column;gap:37px;flex:0 0 677px;width:677px;min-width:0}
.material-track {display:flex;align-items:center;gap:11.5px;width:100%;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.material-track::-webkit-scrollbar {display:none}
.material {flex:0 0 218px;width:218px;padding:15px 14px 20px;border-radius:26px;background:#fff;text-align:center;scroll-snap-align:start}
.material:first-child {height:384px}
.material img {width:190px;height:310px;object-fit:cover;border-radius:14px}
.material h3 {font:600 12px/1.2 var(--body);text-transform:uppercase;color:var(--accent);margin-top:23px;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.materials-carousel .carousel-controls {width:100%}
.materials-carousel .circle {background:white}
@media (min-width:901px) and (max-width:1200px) {
 .materials {--materials-gutter:60px;gap:40px}
 .materials-copy {flex:1 1 360px}
 .materials-copy h2 {font-size:32px}
 .materials-copy p {font-size:15px}
 .materials-copy .badge {font-size:10px}
 .materials-copy .button {font-size:13px}
 .materials-carousel {flex:0 0 480px;width:480px}
 .material-track {width:calc(100% + 60px);padding-right:60px;gap:14px}
 .material h3 {font-size:11px}
}
@media (max-width:900px) {
 .materials {--materials-gutter:var(--gutter);flex-direction:column;align-items:stretch;gap:40px}
 .materials-copy {flex:none;width:100%}
 .materials-copy h2 {font-size:32px}
 .materials-carousel {flex:none;width:100%}
 .material-track {width:calc(100% + var(--materials-gutter));padding-right:var(--materials-gutter);gap:20px}
}
@media (max-width:700px) {
 .materials {--materials-gutter:20px;padding:44px 20px}
 .materials-copy h2 {font-size:28px;line-height:34px}
 .materials-copy p {font-size:14px;line-height:18px}
 .materials-copy .badge {font-size:10px}
 .materials-copy .button {margin-top:8px;font-size:12px}
 .material h3 {font-size:10px}
}